使用钩子生成一个列表，其中包含从画廊或相机中挑选的图像

Question

我使用 react native 和 hooks 库 react-native-image-crop-picker 来创建一个视图，我可以在其中选择用我的相机拍照或打开我的手机图库并选择我想要的任何图像，一旦我有一张图片它应该在列表中显示图片，所以如果我选择多张图片，它应该在列表中显示多张图片。

到目前为止，这段代码可以打开图库并且可以拍照，控制台日志显示它可以拍照，但是我无法在列表中渲染图像，我可以帮忙吗？

import ImagePicker from 'react-native-image-crop-picker';

const Seleccion = ({navigation}) => {
  const [fileList, setFileList] = useState([]);
  const state = useMemo(() => ({ fileList }), [fileList]);

  const onSelectedImage = useCallback((image) => {
    setFileList(fileList => {
      const newDataImg = [...fileList];
      const source = { uri: image.path };
      const item = {
        id: Date.now(),
        url: source,
        content: image.data
      };
      newDataImg.push(item);
      return newDataImg;
    });
  }, [setFileList]);

  const takePhotoFromCamera = useCallback(() => {
    ImagePicker.openCamera({
      width: 300,
      height: 400,
    }).then(image => {
      onSelectedImage(image);
      console.log(image);
    });
  }, [onSelectedImage]);

  const choosePhotoFromLibrary = useCallback(() => {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
    }).then(image => {
      onSelectedImage(image);
      console.log(image);
    });
  }, [onSelectedImage]);

  const renderItem = useCallback(({ item, index }) => {
    return (
      <View>
        <Image source={item.url} style={styles.itemImage} />
      </View>
    );
  }, []);

  return (
    <View style={styles.container}>
      <FlatList
        data={fileList}
        keyExtractor={(item, index) => index.toString()}
        renderItem={renderItem}
        extraData={state}
      />

      <TouchableOpacity style={styles.viewData} onPress={takePhotoFromCamera}>
        <Text>Foto</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.viewData} onPress={choosePhotoFromLibrary}>
        <Text>galeria</Text>
      </TouchableOpacity>
    </View>
  );
}

const resizeMode = 'center';

Seleccion.navigationOptions = {
  headerShown: false,
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#333333',
  },
  container2: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  textContainer: {
    flexDirection: 'column',
    marginTop: 30,
    marginBottom: 10,
  },
  textIniciar: {
    color: 'white',
    width: 300,
    fontSize: 25,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  back: {
    marginTop: 30,
    marginLeft: 20,
    flexDirection: 'column',
    color: 'white',
  },
  textInit: {
    marginTop: 30,
    color: '#b3b4b5',
    textAlign: 'center',
  },
  buttonContainer: {
    marginTop: 100,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  viewData: {
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20,
    width: 260,
    borderRadius: 30,
    height: 45,
    backgroundColor: '#D32345',
  },
  logout: {
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 10,
    width: 260,
    borderRadius: 30,
    height: 45,
    backgroundColor: '#911830',
  },
  loginText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

Answer 1

问题是您没有在样式中定义itemImage 对象。将此添加到您的样式对象中，它应该可以工作

itemImage: {
      height: 200,
      width: 200
  }