'反应天然图像选取器'更新属性' src'时出错管理的视图:RCTImageView

时间:2018-02-22 16:39:55

标签: android firebase react-native render firebase-storage

有谁知道如何解决此错误?

  

"更新属性' src'时出错管理的视图:   RCTImageView"

组件渲染时会出现此错误。我认为图像没有给他们时间下载或类似的东西。

的依赖性: " firebase":" ^ 4.8.2", "反应":" 16.0.0-alpha.12", " react-native":" 0.47", " react-native-image-picker":" ^ 0.26.7",

ERROR

Gallery.js

  import React, { Component } from 'react';
  import { View, Image, ScrollView, StyleSheet, Dimensions } from 'react-native';
  import { connect } from 'react-redux';
  import firebase from '../../config/firebase';
  import { nameChanged } from '../../actions';
  import { CardSectionTransp, InputBlack } from '../common';
  import { SnapshotToArray } from '../../config/helpers';

  const { width, height } = Dimensions.get('window');

  class EventDetail extends Component {
    constructor(props) {
      super(props);

      this.state = {
        images: [],
        objImages: []
      };
    }

    componentWillMount() {
      firebase.database().ref().child('images').orderByChild('order').once('value', snapshot => {
        const images = SnapshotToArray(snapshot);
        this.setState({ objImages: images });
        const arrayImages = [];

        for (const image of images) {
          const starsRef = firebase.storage().refFromURL('gs://bealegendapp.appspot.com/images/' + image.path);
          // Get the download URL
          starsRef.getDownloadURL().then((url) => {
            arrayImages.push(url);
            this.setState({ objImages: arrayImages });
          }).catch((error) => {
            // A full list of error codes is available at
            // https://firebase.google.com/docs/storage/web/handle-errors
            switch (error.code) {
              case 'storage/object_not_found':
                // File doesn't exist
                break;
              case 'storage/unauthorized':
                // User doesn't have permission to access the object
                break;
              case 'storage/canceled':
                // User canceled the upload
                break;
              case 'storage/unknown':
                // Unknown error occurred, inspect the server response
                break;
              default:
                break;
            }
          });
        }
      });
    }

    onNameChange(text) {
        this.props.nameChanged(text);
    }

    render() {
      return (
        <ScrollView style={styles.container}>
          <CardSectionTransp>
             <InputBlack
               label="Nombre"
               onChangeText={this.onNameChange.bind(this)}
               value={this.props.name}
             />
           </CardSectionTransp>
           <View style={{ flex: 1, flexDirection: 'row', flexWrap: 'wrap', marginTop: 10 }}>
            {this.state.objImages && this.state.objImages.length > 0 &&
              this.state.objImages.map((image, key) => {
                return (
                  <View key={key} style={{ width: width / 3 }}>
                    <Image <-------------EEEEEEERRRRRRRROOOOOOORRRRRRR!!!!
                      source={{ uri: image }}
                      style={styles.image}
                    />
                  </View>
                );
              })
            }
            {this.props.photos &&
              this.props.photos.map((image, key) => {
                return (
                  <View key={key} style={{ width: width / 3 }}>
                    <Image
                      source={{ uri: image }}
                      style={styles.image}
                    />
                  </View>
                );
              })
            }
          </View>
        </ScrollView>
     );
   }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
      paddingBottom: 123
    },
    image: {
      height: height / 5,
      resizeMode: 'contain',
      width: width / 3,
      borderWidth: 1,
      borderColor: 'white'
    }
  });

  const mapStateToProps = ({ gallery }) => {
    const { name, photos } = gallery;

    return { name, photos };
  };

  export default connect(mapStateToProps, {
    nameChanged
  })(EventDetail);

1 个答案:

答案 0 :(得分:0)

对于发生此问题的其他任何人-我也有此问题,并暂时通过以下方法解决了该问题:

{ this.state.myImage !== '' ?
        <View>
           <Image source={this.state.myImage} />
           <Button title="keep img?" onPress={this.setImage} /> 
        </View>
        :
         null
    }