React Native 在 Expo App 中保存来自 CameraRoll.getPhotos() 的图像

Question

我正在使用 CameraRoll.getPhotos 函数从相册中获取图像。我访问图片没有问题，但我想编辑其中一张图片，然后将其保存回相册。

getPhotos = () => {
    CameraRoll.getPhotos({
        first: 20,
        assetType: 'Photos'
    })
    .then(r => this.setState({ photos: r.edges, isLoaded: true }));
}

componentDidMount() {
    this.getPhotos();
}

render() {
    const { navigate } = this.props.navigation;
    return (
        <View style={styles.pageWrapper}>
            <View>
                {this.state.isLoaded && 
                <Image source={{uri: this.state.photos[this.state.index].node.image.uri}} style={{width: width, height: width}} />
                }
            </View>
            <ScrollView contentContainerStyle={styles.scrollView}>
                {
                    this.state.photos.map((p, i) => {
                        return (
                            <TouchableHighlight style={{opacity: i === this.state.index ? 0.5 : 1}} key={i} onPress={() => this.setIndex(i)}>
                                <Image style={{width: width / 4, height: width / 4}} source={{uri: p.node.image.uri}} />
                            </TouchableHighlight>
                        )
                    })
                }
            </ScrollView>
        </View>
    );
}

我想把图片的uri传过去，保存成图片文件。但是uri是asset-library://格式，下一页不能这样加载：

<Image source={{uri: assetLibraryURI}} />

我通过以下方式将 assetLibraryURI 传递到下一页：

onPressHeaderRight() {
    const { navigate } = this.props.navigation;
    navigate('Editor', { assetLibraryURI: this.state.photos[this.state.index].node.image.uri });
}

我错过了什么？

p.s。我在 Expo 应用程序中工作，即没有弹出应用程序。

Answer 1

虽然这不能直接回答您的问题，但我认为它与您的问题相关。

CameraRoll API 需要你 link RCTCameraRoll react-native-cli 项目中的库。与 expo 一起使用时，这可能会导致一些问题。

CameraRoll provides access to the local camera roll / gallery. Before using this you must link the RCTCameraRoll library. You can refer to Linking for help.

Expo 有一个不同的 API 用于集成图片库。您可以阅读更多内容 here。

ImagePicker

Provides access to the system’s UI for selecting images from the phone’s photo library or taking a photo with the camera.

您可以使用 Expo.ImagePicker.launchImageLibraryAsync(options) 以获得更好的性能。此方法还有 base64 属性，如果 uri 结果与以前相同（asset-library:// 格式），则可以更容易使用。

React Native 在 Expo App 中保存来自 CameraRoll.getPhotos() 的图像

React Native save image from CameraRoll.getPhotos() in Expo App

react-native

expo

ImagePicker