反应本机平面列表

Question

React Native 的新手，但我有一组数据

list = [
{key: "image1", imgLink: "imagelink"},
{key: "image2", imgLink: "imagelink"},
{key: "image3", imgLink: "imagelink"},
{key: "image3", imgLink: "imagelink"},
]

它通过 props 传递给我的组件，然后我将它放入我的构造函数中

constructor(props){
    super(props)
    this.state = {
        portraitImage: 'initalImageLink',
        isModalVisible: false,
        list: this.props.list,
    };


}

我在模态中也有一个 FlatList：

<Modal isVisible={this.state.isModalVisible} onBackdropPress = {this._hideModal}>
    <View style={{ flex: 1, backgroundColor:'#FFFFFF'}}>
        <FlatList 
            data={this.state.list} 
            renderItem={
                ({item}) => <ListItem onPress = {this._setImg.bind(this,item.imgLink)} title={item.key} />
            }
        />

        <Button title = {'Close Modal'} onPress={this._hideModal}/>      
    </View>
</Modal>


_setImage(value){
    this.setState({
        portraitImage: value
    });
};

我试图只显示按键名称列表（image1、image2、image3、image4），然后当用户按下其中一个按键名称时，它将更改 portraitImage 状态。

这就是我现在拥有的，但我的 FlatList 似乎是空白的，什么也没有显示。我不明白为什么列表是空白的。

当我设置数据 = {this.props.list} 而不是状态时，我得到

Element type is invalid: expected a string (for built-in components) or >a class/function (for composite components) but got: undefined. You >likely forgot to export your component from the file it's defined in.

Answer 1

这是一个如何在平面列表中显示数据的简单示例，如果您分享更多代码，我们可以为您提供更好的示例

constructor(props) {
super(props)
this.state = {
  list: []
};
}

getList = () => {
const li = [
  { key: "image1", imgLink: "imagelink" },
  { key: "image2", imgLink: "imagelink" },
  { key: "image3", imgLink: "imagelink" },
  { key: "image3", imgLink: "imagelink" },
]

this.setState({
  list: li
})
}

componentWillMount() {
this.getList()
}

render() {
return (
  <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
    <FlatList
      data={this.state.list}
      renderItem={({ item }) => <Text>{item.key}</Text>}
    />
  </View>);
}
}

Answer 2

没有意义，因为 this.state.list 和 this.props.list 不应该不同。至少这是我可以从您提供的代码中读到的内容。

我能说的是：

Element type is invalid: expected a string (for built-in components) or >a class/function (for composite components) but got: undefined. You >likely forgot to export your component from the file it's defined in.

它说 'undefined' 被用作类型，它不是！我的猜测是 <ListItem .../> 未定义。

React-native 没有内置 ListItem 类型。 react-native-elements 可以，但我不确定他们的 ListItem 类型是否可以像普通的 <View /> 类型一样呈现。你能添加你的导入和道具定义（如果有的话）所以我们可以看到什么是什么？

您可以尝试 <TouchableHighlight .../> 而不是 <ListItem .../> 来检查错误是否仍然存在吗？

Answer 3

您可以使用 TouchableOpacity 而不是 ListItem 并且在单击该项目时您可以控制被单击的项目，代码如下。

<TouchableOpacity onPress={()=>console.log("item: ",item.key)}>
    <Text >{item.key}</Text>
</TouchableOpacity>

反应本机平面列表

React Native FlatList

list

listitem

react-native

react-native-flatlist