如何在 react-native 的 ListView 中传递数据？

Question

我想在 LiestView 中呈现本地状态。 我不熟悉 ListView，¥。 没用。

export default class Top extends Component {
  state=[{title: 'a'}, {title: 'b'}, {title: 'c'}]

  _renderItem = ({item}) => (
    <View>
      <Text>{item.key}</Text> // here
      <Category />
    </View>
  );

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={this._renderItem(item)}
      />
    );
  }
}

下面是我的代码。它有效。如何更改此代码？ 我需要标题。

export default class Top extends Component {
  state={
    data:[{}, {}, {}]
  };

  _renderItem = () => (
    <View>
      <Category />
    </View>
  );

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={this._renderItem}
      />
    );
  }
}

感谢您的宝贵时间。

Answer 1

state 必须是一个对象，如果你没有 key prop，那么你需要定义一个 keyExtractor：

import React, { Component } from "react";
import { Text, View, FlatList } from "react-native";

export default class Top extends Component {
  state = {
    data: [{ id: 1, title: "a" }, { id: 2, title: "b" }, { id: 3, title: "c" }]
  };

  _renderItem = ({ item }) => (
    <View>
      <Text>{item.title}</Text>
    </View>
  );

  // You could use the title instead of the id, but not very scalable
  _keyExtractor = (item, index) => item.id;

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={this._renderItem}
        keyExtractor={this._keyExtractor}
      />
    );
  }
}

Answer 2

首先导入ListView

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

在你的组件中会像这样挂载创建数据源

 componentWillMount(){

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.dataSource = ds.cloneWithRows(this.props.yourProps);
 }

渲染列表视图

render() {
    return (
       <View>
           <ListView
                enableEmptySections
                dataSource = {this.dataSource}
                renderRow={this.renderRow}
           />
       </View>     
    ); 
}

最后，您必须让 ListView 知道哪些数据以及您希望如何在列表视图中显示数据。为此，创建一个呈现列表视图行的函数

renderRow(yourProps) {
        return (
            <Text>{yourProps.yourData}</Text>
        );
}

您可以随意设置该行的样式。

更多信息你可以在 gitHub 中查看这个 repo：https://github.com/ishraqe/manage-user/blob/master/src/components/EmployeeList.js