首页 > 解决方案 > 通过 fetchAPI 获取数据后,FlatList 在 ios 上呈现,但不在 android 上呈现

问题描述

我正在使用本机反应并尝试根据我使用 fetch API 获取的数据呈现一个简单的平面列表。

下面是代码 -

class CategoryList extends React.Component 
{
    constructor(props) 
    {
        super(props);
        var context = this;

        this.state = {
            categories: []
        }
    }

    componentDidMount()
    {
        fetch(api_config.url + api_config.routes.all_top_level_categories)
        .then(response => response.json())
        .then(data => this.setState({ categories: data}))
        .catch(e => console.log(e));
    }

    renderFlatListItem(data)
    {
        return(<View style={styles.item}>
            <Text>{data.item.name}</Text>
          </View>);
    }

    renderItemSeparator()
    {
        return(
            <View
                contentContainerStyle={styles.itemSeparator} />
        );
    }

    render() {
        return (
                <FlatList contentContainerStyle={styles.list}
                    data={this.state.categories}
                    renderItem={(data) => this.renderFlatListItem(data)}
                    ItemSeparatorComponent={this.renderItemSeparator}
                    keyExtractor={data => data.name}
                />
        );
    }
  }

export default class HomeScreen extends React.Component
{
    static navigationOptions = ({ navigation }) => {
      return {
        title: 'Home',
      }
    };
    render() {
      return (
        <CategoryList />
      );
    }  
}

下面是 Android 的图像 -

在此处输入图像描述

下面是 iOS 的图像 -

在此处输入图像描述

任何有关该主题的帮助将不胜感激。谢谢你。

标签: androidiosreact-native

解决方案


推荐阅读