Question

我正在尝试在我的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' 
  },
});

所以，我期待发生的是查看文本项列表。

正在发生的事情是我看到一个没有任何内容的白色屏幕。

为什么这个列表没有呈现？

Answer 1

如果需要，可以尝试复制它，在return（）中定义FlatList。

 <View>
   <FlatList
    data={Items}
    renderItem={this.renderItems}
    enableEmptySections
    keyExtractor={item => item.id}
    ItemSeparatorComponent={this.renderSeparator}
   />
</View>

然后在你的类之外的常量（对象数组）中声明 Items ，就像这样，

const Items = [
{
id: FIRST,
title: 'item1',
},
{
id: SECOND,
title: 'item2',
},
{
id: THIRD,
title: 'item3',
},
// and so on......
];

在此之后通过调用函数

将您的项目放在渲染之外

onSelection = (item) => {
 console.log(item.title)
}

renderItems = ({ item }) => {
return(
  <TouchableOpacity 
    onPress={() => this.onSelection(item)}>
    <View>
      <Text>
          {item.title}
      </Text>
    </View>
  </TouchableOpacity>
)
}

Answer 2

您是否没有错过 renderItem 的返回值？

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}) => {
                    return this._renderImageView(item, index);
                }
             }
             />
        );
    }
}

React Native FlatList不会呈现

2 个答案: