Question

我尝试使用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>

        );
    }
}

Answer 1

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

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

FlatList不输出数据 - React Native

1 个答案: