Flatlist不渲染

最新推荐文章于 2022-02-27 21:28:01 发布

是我啦是我啦

最新推荐文章于 2022-02-27 21:28:01 发布

阅读量880

点赞数

CC 4.0 BY-SA版权

文章标签： react native javascript react.js

本文链接：https://blog.csdn.net/weixin_44807017/article/details/122121551

在react-native项目中，遇到Flatlist组件封装后在页面上不渲染的问题。通过将Flatlist的style={{flex: 1}}移至外部View，并在父组件添加flex: 1，实现了显示，但只显示部分内容。尝试使用ScrollView包裹Flatlist，但会导致警告。目前的解决方案是等待找到避免VirtualizedLists嵌套的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-native项目，Flatlist组件封装后，引用时在页面中不渲染。

之前子组件是这样写的

render() {
    const { evaluationAllList } = this.props.evaluationReducer;
    console.log("evaluationAllList",evaluationAllList);
    return (
      <View>
        <FlatList
          style={{flex: 1}}
          data={evaluationAllList}
          renderItem={this._renderItem}
          showsVerticalScrollIndicator={false}
          keyExtractor={(item, index) => index.toString()}
          refreshControl={
          <RefreshControl
              tintColor="#2b2b2b"
              refreshing={this.state.loadinging}
              colors={['#2b2b2b', '#2b2b2b', '#2b2b2b']}
              onRefresh={() => {
              this._queryEvaluationList();
              }}
          />
          }
          onEndReachedThreshold={0.01}
          onEndReached={() => this._onLoadMore()}
          ListEmptyComponent={() => this._returnEmptyComponent()}
          ListFooterComponent={this._createListFooter()}
        />
      </View>
    );

之前父组件引用是这样的

<View style={styles.commonStyle}>
    <Text style={styles.comItem}>最新评论：</Text>
    <EvaluationItem communityCode={communityCode}></EvaluationItem>
</View>

commonStyle样式

commonStyle: {
    backgroundColor:'#ffffff',
    marginTop:px2dp(30),
    borderRadius:px2dp(10),
    paddingBottom:px2dp(40),
  },

更改后：

子组件将Flatlist的 style={{flex: 1}} 放到外部View中

render() {
    const { evaluationAllList } = this.props.evaluationReducer;
    console.log("evaluationAllList",evaluationAllList);
    return (
      <View style={{flex: 1}}>
        <FlatList
          data={evaluationAllList}
          renderItem={this._renderItem}
          showsVerticalScrollIndicator={false}
          keyExtractor={(item, index) => index.toString()}
          refreshControl={
          <RefreshControl
              tintColor="#2b2b2b"
              refreshing={this.state.loadinging}
              colors={['#2b2b2b', '#2b2b2b', '#2b2b2b']}
              onRefresh={() => {
              this._queryEvaluationList();
              }}
          />
          }
          onEndReachedThreshold={0.01}
          onEndReached={() => this._onLoadMore()}
          ListEmptyComponent={() => this._returnEmptyComponent()}
          ListFooterComponent={this._createListFooter()}
        />
      </View>
    );

父组件的样式加了个flex:1

commonStyle: {
    flex:1,
    backgroundColor:'#ffffff',
    marginTop:px2dp(30),
    borderRadius:px2dp(10),
    paddingBottom:px2dp(40),
  },

就显示出来啦，但只显示指定高度的一丢丢，后来我在父组件外部加了ScrollView，但ScrollView套在Flatlist外面是有问题的，会报黄字VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

目前先这样写，等我知道怎么解决了再补充。