FlatList 不输出数据 - React Native答案

【问题标题】：FlatList does not output data - React NativeFlatList 不输出数据 - React Native
【发布时间】：2018-11-28 06:21:40
【问题描述】：

我正在尝试通过 React-Native 使用 FlatList，我正在按照以下文章进行操作。

https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6

我创建了一个临时数组来测试它。但我无法让我的观点出现。我在这里做错了什么？

我什至没有得到我在FlatList 中给出的console.log

class FlatListTest extends Component {

    constructor() {

        super();

        this.state = {


            data: [

                {
                    id: 1,
                    name: 'Gal Gadot',
                    img_url: 'http://i0.lisimg.com/9150500/280full.jpg'


                },
                {
                    id: 2,
                    name: 'Camila Cabello',
                    img_url: 'http://i0.lisimg.com/9150500/280full.jpg'


                },
                {
                    id: 3,
                    name: 'Akon',
                    img_url: 'http://i0.lisimg.com/9150500/280full.jpg'


                }

            ]

        }

    }

    render() {

        return (

            <View>

                    <FlatList
                        numColumns={3}
                        style={{flexDirection: 'column'}}>
                        data={this.state.data}
                        renderItem={({item}) => {

                        const content = item;
                        console.log("XXXX ", content);
                        return (
                            <View style={styles.userCard}>

                                <Text>{content.name}</Text>

                            </View>
                        )

                    }}


                    </FlatList>

                </View>

        );
    }
}

【问题讨论】：

控制台出现任何错误
@RIYAJKHAN 终端没有错误。

标签： reactjs react-native react-native-flatlist

【解决方案1】：

这样使用它解决了我的问题

<FlatList
     numColumns={3}
     data={this.state.data}
     renderItem={({item}) => <View style={styles.userCard}><Text>{item.name}</Text></View>}
/>

【讨论】：