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

Posted 2023-03-14

【中文标题】React Native ToDo 应用程序不显示列表视图内容

【英文标题】：React Native ToDo app not displaying list view content

【发布时间】：2017-03-09 14:00:24

【问题描述】：

我们正在尝试使用 React Native 为一个学校项目创建一个示例待办事项列表应用程序。我们的问题是我们无法查看 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/>
           
      />);
  ;
;

【问题讨论】：

为什么ToDoListItem.js中你的View里面有View？免责声明：我不是 React Native 忍者，几乎没有触及表面。

【参考方案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)

耶！有效！

我已经合并了两个组件。你可以把它分开。 最好在视图中呈现列表视图。 确保您的数据源设置正确（this.props）