image - 在 Image 组件中使用 Expo 显示所选照片 - React Native

Question

我在表单中有一个个人资料照片字段。起初，表单有一个占位符 Image用户可以单击并选择另一个与表单一起提交。当更改 Image , 我想要新的 Image在表格中显示。对于Image选择，我正在使用 Expo 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} />