我可以在Flatlist数据中调用props.navigation吗？
提问于 2019-03-14 03:49:27
我声明了一个const，其中包含从另一个页面传递的参数。
const obj = this.props.navigation.state.params.item;
const itemArray = Object.values(obj.name)现在，我在Flatlist数据中调用itemArray，如下所示。
这是我的传单：
<FlatList
key={this.keyExtractor}
data={itemArray}
renderItem={({item}) => this.renderText(item)}
/>问题是它没有显示文本。这只是空白。
下面是我在Flatlist中调用的呈现方法：
renderText = (itt) => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<ListItem
title={itt.name}
/>
</View>
)
}
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-03-14 05:12:52
由于FlatList不接受对象，所以您必须解决这个问题。您还必须创建一个数组并将对象推到那里。
const obj = this.props.navigation.state.params.item;
var propsArray = [];
const itemArray = Object.assign(obj)
propsArray.push(itemArray)
return (
<View>
<FlatList
key={this.keyExtractor}
data={propsArray}
renderItem={({ item }) => this.renderText(item)}
/>
</View>
}您的呈现方法应该保持不变：
renderText = (itt) => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<ListItem
title={itt.name}
/>
</View>
)
}Stack Overflow用户
发布于 2019-03-14 04:08:57
您应该能够使用FlatList。
下面是如何在组件的呈现方法中实现它。
- 注意，您不需要使用
thisinfront的obj变量。 - 此外，您的
item函数拼写错误，如果您不更正它，可能会导致问题。 - 要让这个特定的代码工作，要传递的对象应该是一个字符串数组，类似于
['first', 'second', 'third']。 - 另外，您应该在组件中将函数定义为
keyExtractor。
keyExtractor = (item, index) => {
return index.toString();
}
render () {
const obj = this.props.navigation.state.params.item;
return (
<FlatList
key={this.keyExtractor}
data={obj}
renderItem={({ item }) => <Text>{item}</Text>}
/>
);
}Stack Overflow用户
发布于 2019-03-14 04:01:48
您可以直接使用
<FlatList
key={this.keyExtractor}
data={this.props.navigation.state.params.item}
renderItem={({ iteemm }) => <Text>{iteemm}</Text>}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55161779
复制相关文章
腾讯云开发者
