无法在React Native中显示文件中的图像

Question

我正在研究React本机应用程序，我在应用程序中使用SQLite数据库。我必须在应用程序中上传/显示图像。上传和显示图像的代码是：

<View>
  {this.state.loading ? (
    <ActivityIndicator style={{marginTop: 20}} />
  ) : (
    <View></View>
  )}
  <ImgGallery data={this.state.images} />
  <Card>
    <oButton.Button
      title="Bild hinzufügen"
      onPress={() => {
        setTimeout(() => {
          this.setState({loading: true});
        }, 1000);
        ImagePicker.showImagePicker(options, responseIMG => {
          if (responseIMG.uri) {
            ImageResizer.createResizedImage(
              responseIMG.uri,
              responseIMG.width,
              responseIMG.height,
              'JPEG',
              10,
              0,
            )
              .then(response => {
                // response.uri is the URI of the new image that can now be displayed, uploaded...
                // response.path is the path of the new image
                // response.name is the name of the new image with the extension
                // response.size is the size of the new image
                // var imgs = this.state.images;
                // if(imgs !== null && imgs !== undefined && imgs !== ''){
                //     imgs.push({image: response.uri});
                //     this.setState({images: imgs});
                // }else{
                //     this.setState({images: [{image: response.uri}]});
                // }

                var answs = this.state.answers ? this.state.answers : [];
                var dt = new Date();
                date =
                  (dt.getDate() > 9 ? dt.getDate() : '0' + dt.getDate()) +
                  '.' +
                  (dt.getMonth() > 9
                    ? dt.getMonth()
                    : '0' + (dt.getMonth() + 1)) +
                  '.' +
                  dt.getFullYear();

                var questionIdFromNavigation = this.props.navigation.state
                  .params.q_id;
                var imageToBeSavedInDb = {
                  a_id: null,
                  content: null,
                  image: response.uri,
                  date: date,
                  p_id: this.state.project.p_id,
                  q_id: questionIdFromNavigation,
                  neu: 1,
                  type: '2',
                  user: em,
                  deleted: 0,
                  local_p_id: this.props.navigation.state.params.project
                    .local_p_id,
                };
                answs.push({
                  a_id: null,
                  content: null,
                  image: response.uri,
                  date: date,
                  p_id: this.state.project.p_id,
                  q_id: questionIdFromNavigation,
                  neu: 1,
                  type: '2',
                  user: em,
                  deleted: false,
                  local_p_id: this.props.navigation.state.params.project
                    .local_p_id,
                });
                this.setState({answers: answs});
                //saveAns(this.props.navigation.state.params.project, this.state.answers);
                db.insertImage(
                  imageToBeSavedInDb,
                  this.props.navigation.state.params.project.local_p_id,
                );
                this.setState({loading: false});

                var imgs = this.state.images;
                if (imgs !== null && imgs !== undefined && imgs !== '') {
                  imgs.push({image: imageToBeSavedInDb});
                  this.setState({images: imgs});
                } else {
                  this.setState({images: [{image: imageToBeSavedInDb}]});
                }
              })
              .catch(err => {
                alert(err);
              });
          } else {
            if (responseIMG.didCancel) {
            } else if (responseIMG.error) {
            } else {
            }
          }
        });
      }}
    />
  </Card>
</View>;

ImgGallery代码为：

render()  {
  if (this.state.imageData) {
    return (
      <View>
        <View style={styles.view}>
          {this.state.imageData == '' ||
          this.state.imageData == null ||
          this.state.imageData == undefined
            ? null
            : this.state.imageData.map(img => {
                var tst = img;
                console.log(img.image.image);

                return (
                  <TouchableHighlight
                    key={this.uuidv4()}
                    onPress={() => {
                      this.setState({zoom: img.image.image});
                      this.setState({completeImageObject: img.image});
                    }}>
                    <Image
                      style={styles.imagePreview}
                      source={{uri: img.image.image}}
                    />
                  </TouchableHighlight>
                );
              })}
        </View>
        {this.state.zoom ? (
          <Card>
            <PinchZoomView scalable={false}>
              <FitImage resizeMode="contain" source={{uri: this.state.zoom}} />
            </PinchZoomView>
            <TouchableOpacity
              style={styles.btn}
              onPress={() =>
                this.deleteImage(
                  this.state.zoom,
                  this.state.completeImageObject,
                )
              }>
              <Text style={{color: 'white'}}>Delete Image</Text>
            </TouchableOpacity>
          </Card>
        ) : (
          <View style={styles.container}>
            <Text>Bild zum vergrößern antippen.</Text>
          </View>
        )}
      </View>
    );
  } else {
    return <Text style={styles.noIMG}>Keine Bilder vorhanden</Text>;
  }
};

以某种方式我无法显示图像，我确实获得了图像的“框”，但它不显示图像。 （实际上，它确实会显示图像，而有时却不显示图像）。图像文件路径为：

file:///Users/ssi/Library/Developer/CoreSimulator/Devices/0746958E-03AA-4A38-A208-2CD36B1A484E/data/Containers/Data/Application/F7A79620-308A-4F0A-919D-4FAF3AC556EB/Library/Caches/56794F61-6E81-44AB-8FDE-5B46670D22F5.jpg

应用的样式为：

const styles = StyleSheet.create({
container: {
    height: 100,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
},
noIMG:{
    padding: 10,
    fontSize: 20,
    marginTop: 15,
    textAlign: "center"
},
imagePreview:{
    width: 100,
    height: 100,
    margin: 5

},
btn:{
  backgroundColor:'#e84242',
  flex: 0,
  borderRadius: 5,
  padding: 5,
  marginTop:5,
  paddingHorizontal: 20,
  alignSelf: 'center',
  textAlign: 'right',
  fontSize: 20,
  fontWeight:'bold'
},
view: {
    marginTop: 20,
    flex: 1, flexDirection: 'row', flexWrap:'wrap'
}
});