我正在尝试在我的React Native应用程序中实现FlatList,但无论我尝试什么样的东西都不会渲染!
它旨在成为用户可以轻扫的水平图像列表,但此时我很乐意获得一个文本列表 .
这是相关的代码 . 我可以确认每个渲染函数都被调用 .
render() {
const cameraScreenContent = this.state.hasAllPermissions;
const view = this.state.showGallery ? this.renderGallery() : this.renderCamera();
return (<View style={styles.container}>{view}</View>);
}
renderGallery() { //onPress={() => this.setState({showGallery: !this.state.showGallery})}
return (
<GalleryView style={styles.overlaycontainer} onPress={this.toggleView.bind(this)}>
</GalleryView>
);
}
render() {
console.log("LOG: GalleryView render function called");
console.log("FlatList data: " + this.state.testData.toString());
return(
<FlatList
data={this.state.testData}
keyExtractor={this._keyExtractor}
style={styles.container}
renderItem={
({item, index}) => {
this._renderImageView(item, index);
}
}
/>
);
}
}
_keyExtractor = (item, index) => index;
_renderImageView = (item, index) => {
console.log("LOG: renderItem: " + item);
return(
<Text style={{borderColor: "red", fontSize: 30, justifyContent: 'center', borderWidth: 5, flex: 1}}>{item}</Text>
);
}
//testData: ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9"]
我相信这不是一些弹性问题,但如果我错过了一些东西,那么相关的样式表也是如此:
const styles = StyleSheet.create({
container: {
flex: 1
},
overlaycontainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
},
});
所以,我期待发生的是查看文本项列表 .
发生了什么事情,我看到一个没有任何内容的白色屏幕 .
为什么这个列表没有呈现?
1 回答
如果需要,可以尝试复制它,在return()中定义FlatList .
然后在你的类之外声明你的Items里面的常量(对象数组),就像这样,
在此之后通过调用函数将您的项目放在渲染之外