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似乎是空白的并且没有显示任何内容。我不明白为什么列表是空白的。

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

元素类型无效：期望一个字符串（用于内置组件）或>一个类/函数（用于复合组件）但得到：undefined。您可能忘记将组件从其定义的文件中导出。

Answer 1

没有意义，因为[In] ref Message和this.state.list不应该有所不同。至少这是我从你提供的代码中读到的内容。

我能说的是：

元素类型无效：期望一个字符串（用于内置组件）或>一个类/函数（用于复合组件）但得到：undefined。您可能忘记从您定义的文件中导出组件。

它说'undefined'被用作一种类型，但事实并非如此！我的猜测是this.props.list未定义。

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

您是否可以尝试使用<View />代替<TouchableHighlight .../>来检查错误是否仍然存在？

Answer 2

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

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 3

您可以使用 ListItem 代替 TouchableOpacity，并且在点击项目时您可以控制点击的项目，代码如下。

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

React Native FlatList

3 个答案: