React Native FlatList 不会渲染答案

【问题标题】：React Native FlatList won't renderReact Native FlatList 不会渲染
【发布时间】：2018-07-01 06:59:17
【问题描述】：

我正在尝试在我的 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"]

我相当确信这不是 flex 问题，但如果我错过了什么，这里也是相关的样式表：

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  overlaycontainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between' 
  },
});

所以，我期望看到的是一个文本项列表。

我看到的是白屏，上面什么都没有。

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

【问题讨论】：

你为什么有两个render()s？
FlatList 在一个单独的组件中。

标签： react-native jsx react-native-flatlist

【解决方案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>
)
}

【讨论】：

【解决方案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);
                }
             }
             />
        );
    }
}

【讨论】：