React原生ToDo应用程序不显示列表视图内容

问题描述：

我们正在尝试使用React Native为学校项目创建示例待办事项列表应用程序。我们的问题是我们无法查看ListView项目。我们现在所要做的就是让一个项目出现在列表中。我们对渲染进行了硬编码，只显示“你好”。不幸的是，我们没有看到任何东西。我们知道该组件正在呈现，因为控制台日志显示输出。我们一直在使用此示例指导：React原生ToDo应用程序不显示列表视图内容

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}/> 
      } 
     />); 
    }; 
};

为什么在您的视图中的ToDoListItem.js中有一个视图？免责声明：我不是React Native忍者，几乎没有划伤表面。 –

答

试试这个：

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)

耶！作品！

我已经合并的两个组成部分。你可以分开。更好地呈现视图内的列表视图。确保您的数据源设置正确（this.props）

React原生ToDo应用程序不显示列表视图内容

相关推荐