Question

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

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)

耶！作品！

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

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

1 个答案: