将图像 uri 从一个组件传递到另一个组件答案

【问题标题】：Passing an image uri from one component to another将图像 uri 从一个组件传递到另一个组件
【发布时间】：2019-07-30 07:17:55
【问题描述】：

我已经完成了拍照功能，并且想将拍照的uri传递给另一个组件来查看拍照的照片。如何将 uri 从一个组件传递到另一个组件？

我尝试在父组件中设置状态变量，并在子组件中使用props调用该变量，但出现引用错误。

我在 Parent Component 中声明的状态变量：

state = {
        hasCameraPermission: null,
        type: Camera.Constants.Type.back,
        pho: "",
    }

这是父组件中带有动作的按钮：

<MaterialCommunityIcons name="circle-outline" 
                            onPress = { () => this.takePhoto() }
                            style={{ color: 'white', fontSize: 100 
         }} />

Parent Component中的拍照功能：

async takePhoto(){
        if(this.camera){
            const photo = await this.camera.takePictureAsync();
            //console.log(photo.uri);
            this.setState({formCam: photo.uri});
            this.setState({pho: photo.uri});
            console.log(this.state.pho);
        }
    }

最后是我希望在子组件中查看我的图片的 Image 标签：

 render(){
        return (
            <View>
               <Image source={{uri: props.pho}} 
                      style={{width:300, 
                              height: 300, 
                              justifyContent: 'center', 
                              alignContent: 'center', 
                              top: 50}} />
            </View>
        );
     }

我希望在父组件中拍摄的照片显示在子组件中。

【问题讨论】：

标签： javascript reactjs react-native expo

【解决方案1】：

Download the latest code of image picker from here

然后拿到图片后使用（在功能组件中）

navigation.navigate('componentname',{image: response.uri});

在两个代码中都使用上面的代码（从图库中选择并从相机中捕获）

在另一个你想展示的组件中这样做

const componentname = ({navigation,route}) => {
   const selectedImage = route.params.image;
}

然后在Image标签中使用这个值例如： <Image source={{ uri: selectedImage }} style={{width: 200,height: 200}} />

【讨论】：