如何传递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

状态必须是一个对象，如果你没有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 知道您希望在列表视图中显示哪些数据以及如何显示这些数据。为此，创建一个函数来呈现列表 View

的行

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

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

有关更多信息，您可以在 gitHub 中查看此 repo：https://github.com/ishraqe/manage-user/blob/master/src/components/EmployeeList.js

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

How to pass the data in react-native's ListView?

react-native

react-native-flatlist