javascript - react 原生图像裁剪选择器在平面列表上显示(渲染)图像时出现问题

Question

所以我让这个组件选择或选择多个图像并将其保存(或不保存)在这个空数组中以将它们显示在一种轮播中，至少这是我的想法，无论如何，这是我的功能

   const selectImage = async () => {
    const ImageList = [];
    ImagePicker.openPicker({
      multiple: true,
      waitAnimationEnd: false,
      includeExif: false,
      forceJpg: true,
      compressImageQuality: 0.3,
      maxFiles: 10,
      mediaType: 'photo',
      includeBase64: true,
    }).then(response => {
        response.map(image => {
          setImages(ImageList.push({
            id: ImageList.length,
            filename: image.filename || Moment().toString(),
            path: image.path,
            type: image.mime,
            data: image.data,
          }));
        });
        setImages(ImageList);
        console.log(ImageList);
      }).catch((e) => {
        console.log('ERROR ' + e.message);
        Alert.alert('ERROR ', e.message);
      });
  };

对象的结果是这个

所以显示图像的一种简单方法是

            Object.keys(Images).length !== 0 ? Images && (
              Images.map((value, index) => {
                return (
                  <View key={index.key}>
                    <Text>{value.filename}</Text>
                    <Image style={{width: 200, height: 200}} source={{uri: `data:${value.type};base64,${value.data}`}}/>
                  </View>
                );
              })
            )
: null

所以它完美无瑕，但这并不......

      <FlatList
        data={Images}
        horizontal={true}
        decelerationRate="fast"
        bounces={false}
        renderItem={(item, index) => {
          <View style={styles.alignView}>
            <View style={styles.titleTextView}>
              <Text>{item.filename}</Text>
              <Image style={{width: 200, height: 200}} source={{uri: `data:${item.type};base64,${item.data}`}}/>
            </View>
          </View>;
        }}
        keyExtractor={(item, index) => item.id}
      />

起初我以为是 key 提取器，但似乎不是问题
编辑:已解决，我在渲染项中缺少 {} 以及返回

                renderItem={({item, index}) => {
              return                   <View style={styles.alignView}>
              <View style={styles.titleTextView}>
                <Text>{item.filename}</Text>
               <Image style={{width: 200, height: 200}} source={{uri: `data:${item.type};base64,${item.data}`}}/>
              </View>
            </View> //<Text>{item.filename}</Text>; /**/
            }

Answer 1

我建议你优化selectImage

const selectImage = async () => {
    await ImagePicker.openPicker({
      multiple: true,
      waitAnimationEnd: false,
      includeExif: false,
      forceJpg: true,
      compressImageQuality: 0.3,
      maxFiles: 10,
      mediaType: 'photo',
      includeBase64: true,
    }).then(response => {
        const ImageList = response.map((image, index) => ({
            id: index,
            filename: image.filename || Moment().toString(),
            path: image.path,
            type: image.mime,
            data: image.data,
        }));
        setImages(ImageList);
        console.log(ImageList);
      }).catch((e) => {
        console.log('ERROR ' + e.message);
        Alert.alert('ERROR ', e.message);
      });
  };

和你的renderItem函数返回未定义。
这是正确的版本

<FlatList
    data={Images}
    horizontal={true}
    decelerationRate="fast"
    bounces={false}
    renderItem={(item, index) => (
      <View style={styles.alignView}>
        <View style={styles.titleTextView}>
          <Text>{item.filename}</Text>
          <Image style={{width: 200, height: 200}} source={{uri: `data:${item.type};base64,${item.data}`}}/>
        </View>
      </View>
    )}
    keyExtractor={(item, index) => item.id}
/>

在 => 之后使用括号而不是花括号