React Native：FlatList 未显示

Question

我正在尝试制作一个自定义组件，如果第一个选择不够明确，它将显示新选择的选项。我正在使用 FlatList 组件来显示数据，它似乎没有显示作为道具给出的数据。

这是组件的render函数

import { Header, List, ListItem } from "react-native-elements";
import PickerBox from "./PickerBox";

render() {
    return (
      <View>
        <Header
          centerComponent={{
            text: "By " + this.state.newTaxon + ", did you mean...",
            style: { color: "white", fontSize: 20, textAlign: "center" }
          }}
          backgroundColor="black"
        />
        <FlatList
          data = {this.state.dataSource}
          renderItem = {({item}) => {
            <PickerBox
              title = {item.c_syn_name}
            />
          }}
          keyExtractor = {(item) => item.c_syn_name}
        />
      </View>
    );
}

这是 PickerBox 组件

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    padding: 10,
    marginLeft: 16,
    marginRight: 16,
    marginTop: 8,
    marginBottom: 8,
    borderRadius: 5,
    backgroundColor: "#FFF",
    elevation: 2
  },
  title: {
    fontSize: 16,
    color: "#000"
  },
  container_text: {
    flex: 1,
    flexDirection: "column",
    marginLeft: 12,
    justifyContent: "center"
  },
  description: {
    fontSize: 11,
    fontStyle: "italic"
  }
});

const PickerBox = (title) => {
  return (
    <View style={styles.container}>
        <Text style={styles.container_text}>{title}</Text>
    </View>
  );
};

export default PickerBox;

这是组件中 PickerBox 的导入语句

import PickerBox from "./PickerBox"; // reside in same folder

dataSource 状态来自 JSON object，每个条目中都包含这样的布局。

"c_node_name_scientific": "Centurio",
"c_syn_name": "wrinkle-faced bat",
"i_node_id": 27644,

模拟器中的输出只是 header，但预期输出是 header 以及下面的列表。

Answer 1

你可以试试这个

   renderItem = {({item}) => {
            PickerBox(item.c_syn_name);
          }}

Answer 2

首先，请确保this.state.dataSource不是一个空数组。如果您的数据源是这样的，那么这应该可以工作：

<FlatList 
    data={[{c_syn_name: 'a'}, {c_syn_name: 'b'}]}
    keyExtractor = {item => item.c_syn_name}
    renderItem={({item}) =><PickerBox title = {item.c_syn_name} />}
    />

Answer 3

首先，您需要确保如果您的 renderItem 方法像示例中那样使用带大括号的粗箭头函数，则需要添加一个 return 语句如下：

renderItem={({item}) => { return <PickerBox title={item.c_syn_name} /> }}

如果你不使用大括号，你可以这样定义函数：

renderItem={({item}) => <PickerBox title={item.c_syn_name} />}

其次，确保数据是数组，而不是对象。根据 react-native 文档中 FlatList 的 data 道具的描述：

For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.

从你的问题来看，你似乎想要遍历类似于这样的对象数组：

[
  {
    "c_node_name_scientific": "Centurio",
    "c_syn_name": "wrinkle-faced bat",
    "i_node_id": 27644
  },
  {
    "c_node_name_scientific": "xxx",
    "c_syn_name": "xxx",
    "i_node_id": 123
  },
  //...
]

如果是这种情况，只需将状态的 dataSource 对象包装在数组中，如上所示。

如果您想将数据作为类似于此的对象传递：

{
  key1: {title: 'Title 1'},
  key2: {title: 'Title 2'}
  key3: {title: 'Title 3'}
}

您需要执行类似以下操作才能使 FlatList 可以访问数据：

<FlatList
  data={Object.keys(this.state.dataSource)}  // will result in ["key1", "key2", "key3"]
  renderItem={({item}) => 
    // here `item` will be the Object's key. eg: "key1"
    <PickerBox title={this.state.dataSource[item].title} />
  }
/>

最后，如果 Flatlist 需要随着 State 的更新而更新，则需要在 FlatList 中添加属性 extraData={this.state}。根据 FlatList Documentation:

By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

Answer 4

对我来说，问题是父元素有 flex: 1。删除它解决了我的问题

React Native：FlatList 未显示

React Native: FlatList is not showing

react-native

react-native-flatlist