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

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

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

React Native Super Grid of Images fails to render images

gridview

image-gallery

react-native