阵营本地FlatList

新反应母语，但我这是在道具传递给我的组件，然后我把它放在状态在我的构造阵营本地FlatList

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


}

I数据

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

数组也有一个模式内的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似乎是空白的，什么也没有显示。我不明白为什么这个列表是空白的。

在i设定数据= {this.props.list}代替状态I得到

元类型无效：预期的字符串（用于内置组件）或>类/功能（复合组件），但得到：未定义。你>可能忘了您的组件从它的定义文件导出。

来源

2017-08-29 user3074140

它没有任何意义，因为this.state.list和this.props.list不应该有所不同。至少这是我可以从你提供的代码中读取的。

我可以说的是：

元素类型无效：预期字符串（内置组件）或>类/功能（复合组件），但得到：不确定。您可能忘记从您定义的文件中导出您的组件。

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

React-native没有内置的ListItem类型。 react-native-elements呢，但我不确定它们的ListItem类型是否可以像正常<View />类型那样呈现。您可以添加您的导入和道具定义（如果有），以便我们可以看到什么是什么？

您可以试试<TouchableHighlight .../>而不是<ListItem .../>来检查错误是否持续？

来源

2017-09-05 09:14:33 DerpyNerd

是的，你是对的我没有进口的Listitem组件，我应该提到我发现 – user3074140

很高兴它是一些事情，你从来没有现在有多复杂，它可以在这个阶段在反应原生:) – DerpyNerd

这是一个simpe例如如何显示在平面列表数据，如果您分享更多的代码，我们可以给你更好的例子

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-30 04:37:38

阵营本地FlatList

回答

相关问题