react-native - 从 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：content://media/external/images/media/21680

Answer 1

构造函数是您应该直接修改/初始化的唯一一次state（文档）。任何更改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
   }};
 }