Показать выбранное фото с компонентом Экспо в изображении - 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} />