从 cameraRoll Uri 反应原生渲染图像

Question

我拍了一张照片并用 cameraRoll 保存了它，然后我用 cameraroll uri 作为参数导航，这样我就可以在下一个视图中渲染图像，但是当下一个视图加载时没有错误，但图像没有渲染：

      componentWillMount(){

      const params = this.props.navigation.state
      console.log('Params: ')
      console.log(params.params)
      let imageURL = params.params
      this.setState({imageUri:{
          uri: imageURL
        }
      });

    }

<View style={styles.container}>     
    <Image style={{flex: 1,flexDirection:'row', alignItems:'center', justifyContent: 'center'}} source={this.state.imageUri}/>             
</View>

风格：

container:{ flex:1, justifyContent:'flex-start',alignItems:'center'},

这是来自 imageUrl 的 uri： 内容：//媒体/外部/图像/媒体/21680

Answer 1

构造函数是唯一一次您应该直接修改/初始化state (docs)。 对imageUri 的任何更改都应通过调用this.setState({imageUri: {uri: imageURL}}) 进行。

代替

 constructor(props){
   super(props);
   const params = this.props.navigation.state
   console.log('Params: ')
   console.log(params.params)
   let imageURL = params.params
   this.setState({imageUri: {
     uri: imageURL
   }});
 }

你应该有

constructor(props){
   super(props);
   const params = this.props.navigation.state
   console.log('Params: ')
   console.log(params.params)
   let imageURL = params.params
   state = {imageUri: {
     uri: imageURL
   }};
 }