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对象，该对象在每个条目中都包含这样的布局。

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

模拟器中的输出只是标题，但是预期的输出是标题和下面的列表。

Answer 1

首先，您需要确保，如果renderItem方法使用的是带有大括号的粗箭头功能，就像您在示例中一样，则需要添加 return 语句，如下所示：

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

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

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

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

为简单起见，数据只是一个纯数组。如果要使用其他内容（例如不可变列表），请直接使用基础的VirtualizedList。

从您的问题看来，您似乎想遍历类似于以下对象的数组：

[
  {
    "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更新而更新，则需要将prop extraData={this.state}添加到FlatList中。按照FlatList Documentation：

通过将extraData = {this.state}传递给FlatList，我们确保当state.selected更改时FlatList本身将重新呈现。如果不设置此道具，FlatList将不知道它需要重新渲染任何项目，因为它也是PureComponent，并且道具比较不会显示任何更改。

Answer 2

您可以尝试

DirectoryInfo

Answer 3

首先，请确保this.state.dataSource不是一个空数组。如果您的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 4

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

React Native：FlatList没有显示

4 个答案: