ReactネイティブToDoアプリがリストビューのコンテンツを表示しない

Question

私たちは学校プロジェクトのReact Nativeを使ってサンプルのtodoリストアプリケーションを作成しようとしています。私たちの問題は、ListViewアイテムを見ることができないということです。この時点で私たちがしようとしているのは、リストに表示されるアイテムを取得することだけです。 "Hello"を表示するだけでレンダリングをハードコードしました。残念ながら、私たちは何も見ていません。コンソールログに出力が表示されているため、コンポーネントがレンダリングされていることがわかります。私たちは、指導のために、このサンプルを使用している：ここでは

https://github.com/joemaddalone/react-native-todo

は、私たちのコードは次のとおりです。

ToDoListItem.js

import React, { Component } from 'react'; 
import { 
    Text, 
    View 
} from 'react-native'; 
import styles from '../styles/styles'; 

export default class ToDoListItem extends Component { 
    render() { 
    console.log ("props: ", this.props) 
    var item = this.props.item; 
    return(
     <View> 
     <View> 
      <Text style={{color: 'red'}}>TEST</Text> 
      <Text>{item.txt}</Text> 
      <Text>Hello</Text> 
     </View> 
     </View> 
    ) 
    } 
} 

ToDoList.js

import React, { Component } from 'react'; 
import { 
    Text, 
    View, 
    ListView 
} from 'react-native'; 
import ToDoListItem from './ToDoListItem'; 

export default class ToDoList extends Component { 
    constructor(props) { 
    super(props); 
    console.log("props: ", props.items) 
    }; 
    componentWillMount(){ 
    this.dataSource = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2 
    }); 
    } 
    render() { 
    var dataSource = this.dataSource.cloneWithRows(this.props.items); 
    return(
     <ListView 
     dataSource={dataSource} 
     renderRow={(rowData, sectionID, rowID) => 
      <ToDoListItem item={rowData}/> 
      } 
     />); 
    }; 
}; 

Answer 1

はこれを試してみてください。

import React, { Component } from 'react'; 
import { 
    Text, 
    View, 
    ListView, 
    AppRegistry 
} from 'react-native'; 

class ToDoListItem extends Component { 
    render() { 
    var item = this.props.item; 
    return(
     <View> 
     <View> 
      <Text style={{color: 'red'}}>TEST</Text> 
      <Text>{item.txt}</Text> 
      <Text>Hello</Text> 
     </View> 
     </View> 
    ) 
    } 
} 

class ToDoList extends Component { 
    constructor(props) { 
    super(props); 
    }; 
    componentWillMount(){ 
    this.dataSource = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2 
    }); 
    } 
    render() { 
    var dataSource = this.dataSource.cloneWithRows(['a','b','c']); 
    return(
     <View> 
     <ListView 
     dataSource={dataSource} 
     renderRow={(rowData, sectionID, rowID) => 
      { return (<ToDoListItem item={rowData}/>) } 
     } 
     /> 
     </View> 
    ); 
    }; 
}; 

AppRegistry.registerComponent('App',() => ToDoList) 

yay！作品！

私は2つの要素をマージしました。あなたはそれを分けることができます。 ビュー内でリストビューをレンダリングする方がよい。 データソースが正しく設定されていることを確認してください（this.props）