javascript - 即使将数据（数组）提供给组件，FlatList 也会呈现为空白

问题描述

我正在尝试在我的 React Native 组件中使用 FlatList 呈现对象数据列表，但是我在控制台上得到一个没有任何错误的空白屏幕，这就是为什么在这里很难找到问题的根源。使用 Redux-Saga 方法将数据提供给组件，并提供给 FlatList 显示空白屏幕而没有任何错误。为了仔细检查 FlatList 是否工作正常，我在组件中做了一个模型数组并传递给 FlatList，它按预期呈现了 UI。以下是我在这里使用的代码；

==================================================== =====

    class Mobile extends Component {

      componentDidMount() {
        let { readPostsAction } = this.props;
        readPostsAction();
      }

      renderItem = ({ item }) => {
        return (
          <View>
            <TouchableOpacity onPress={() => this.props.navigation.navigate('HomeDetails', { item })}>
              <Card>
                <CardItem header>
                  <Text style={styles.titleHeading}>{item.title}</Text>
                </CardItem>
                <CardItem cardBody>
                  <Content style={styles.cardContainer}>
                    <CustomCachedImage
              component={FitImage}
              source={{ uri: contentURL(item.attachments[0].url) }}
              style={{ width: width, height: 200 }}
                    />
                    <HTML tagsStyles={bodyText} html={reduceStringLength(contentText(item.excerpt))} />
                  </Content>
                </CardItem>
              </Card>
            </TouchableOpacity>
          </View>
        )
      }

      keyExtractor = (item, index) => item.id;

      render() {
        const { dataSource } = this.props;
        console.log('this.props', this.props);
        return (
          <View>
            <FlatList
              data={dataSource}
              keyExtractor={this.keyExtractor}
              renderItem={this.renderItem}
            />
          </View>
        );
      }
    }

    function mapStateToProps({ launchAppReducer }) {
      return {
        isLoading: launchAppReducer.isLoading,
        dataSource: launchAppReducer.data
      }
    }

    export default connect(mapStateToProps, { readPostsAction: actions.readPostsAction })(Mobile);

==================================================== =====

这是控制台的屏幕截图，显示组件中的数据可用。

标签： javascriptandroidiosreactjsreact-native

javascript - 即使将数据（数组）提供给组件，FlatList 也会呈现为空白

问题描述

解决方案

推荐阅读