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

状态必须是一个对象，如果你没有一个关键道具，那么你需要定义一个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中查看此回购：https://github.com/ishraqe/manage-user/blob/master/src/components/EmployeeList.js

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

2 个答案: