1

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} 而不是 state 我得到

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

4

3 回答 3

2

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

我能说的是：

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

它说“未定义”被用作一种类型，但事实并非如此！我的猜测是<ListItem .../>未定义。

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

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

于 2017-09-05T09:14:33.133 回答
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>);
}
}
于 2017-08-30T04:37:38.860 回答
0

代替ListItem您可以使用TouchableOpacity并单击该项目，您可以控制单击的项目，代码如下。

<TouchableOpacity onPress={()=>console.log("item: ",item.key)}>
    <Text >{item.key}</Text>
</TouchableOpacity>
于 2021-01-06T12:19:55.747 回答