使用图像组件中的Expo显示所选照片 - React Native

Question

我在表单中有个人资料照片字段.首先,表单有一个占位符Image,用户可以单击该选项并选择另一个与表单一起提交的占位符.更改时Image,我希望新的Image显示在表单中.对于Image选择,我使用的是世博会ImagePicker和ImageManipulator,它返回我uri.

问题是,当用户选择新照片时,我在Image组件内部得到一个空白背景.下面的代码显示了我如何获取,操纵并尝试显示Image:

形成

render() {
    [...]
    <ProfileImageEdit
        changePicture={this._onProfileImagePicker}
        picture={this.state.photo}
        uri={this.state.photoChanged}
    />
    [...]
};

_onProfileImagePicker = async () => {
    let cameraRollPermission = await this._getCameraRollPermissionAsync();
    if (cameraRollPermission) {
        let res = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: 'Images',
            allowsEditing: true,
            aspect: [1, 1],
            quality: 1,
            base64: false
        });

        if (!res.cancelled) {
            let fRes = await ImageManipulator.manipulate(res.uri,
                [{ resize: { width: 200, height: 200 } }],
                { compress: 0.5, format: 'png', base64: false });

            this.setState({ photo: fRes.uri, photoChanged: true });
        }
    }
}

表单图像组件

export default class ProfileImageEdit extends React.Component {
    render() {
        console.log(this.props.uri, this.props.picture);
        return (
            <TouchableOpacity
                onPress={() => this.props.changePicture()}
            >
                <View style={styles.container}>
                    <Image
                        source={(!this.props.uri ?
                            this.props.picture :
                            { uri: this.props.picture })
                        }
                        style={styles.image}
                        blurRadius={0.4}
                    />
                </View>
            </TouchableOpacity>
        );
    }
}

Answer 1

您需要将带有uri 键的对象传递给Image组件。

在您的代码中，您缺少uri源对象中的键，请尝试以下操作：

<Image
    source={{ uri: this.props.uri || this.props.picture }}
    style={styles.image}
    blurRadius={0.4} />