React Native Super Grid of Images 无法渲染图像

Question

我绞尽脑汁想弄清楚如何使用 react-native-super-grid 显示图像。我尝试了数组中的几种项目组合，但都没有成功。

我的设置如下：

我已经导入了：

import { FlatGrid } from 'react-native-super-grid';

在我拥有的构造函数中：

constructor() {
    super();
    // this.dbRef = firebase.firestore().collection('users');
    this.dbRef = firebase.firestore().collection('users');
    this.state = {
        images: [
            <Image source = {require('../../../assets/drawable-mdpi/NewStoryCameraIcon.png')}/>,
            // <Image source= {require('../../../assets/drawable-mdpi/NewStoryImage2.png')}/>,
            // <Image source= {require('../../../assets/drawable-mdpi/NewStoryImage2.png')}/>,
            // <Image source= {require('../../../assets/drawable-mdpi/NewStoryImage3.png')}/>,
            // <Image source= {require('../../../assets/drawable-mdpi/NewStoryImage4.png')}/>,
            // <Image source= {require('../../../assets/drawable-mdpi/NewStoryImage5.png')}/>,
            // <Image source= {require('../../../assets/drawable-mdpi/NewStoryImage6.png')}/>,
            // <Image source= {require('../../../assets/drawable-mdpi/NewStoryImage7.png')}/>,
            // <Image source= {require('../../../assets/drawable-mdpi/NewStoryImage8.png')}/>,
          ],            
    };

在我的渲染语句中我有：

            <FlatGrid
                itemDimension={130}
                data={this.state.images}
                style={styles.gridView}
                spacing={10}
                renderItem={({ item }) => (
                    <View>
                        item;
                    </View>
                )}
            />

我不断收到以下错误：

最后，我希望能够阅读相机图库并使用缩略图填充超级网格，并左右滚动它们并进行选择。但我坚持只是让超级网格处理图像。

如果有任何帮助，我将不胜感激。

加里。

更新：根据史蒂夫的指导，我最终得到了这个。

                        This FlatGrid displays the selected pictures from the cameraroll to be included in the new story entry 
                    */}
                    <FlatGrid
                        horizontal
                        itemDimension={50} // (selected photos height) item dimension controls the number of rows visible. if you make it more than the actual height of the image it creates padding that you cannot control.
                        data={this.state.selectedStoryPhotos}
                        style={styles.selectedStoryPicturesStyle}
                        maxDimension={200}
                        spacing={1} // spacing between each item
                        renderItem={({item, index}) => (
                            <TouchableOpacity onPress={() => this._onHandleRemoveSubmittedPicture(item, index)}>
                                <View style={{}}>
                                    <Image
                                        style={styles.selectedStoryPicturesImage} // you have to have the width and height in here to display a larger image.
                                        source={{uri: item.uri}}
                                    />
                                </View>
                            </TouchableOpacity>
                        )}
                    />

                    {/*

Answer 1

只需在 View 组件中写 {item} 而不是 item; 并重试。