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 App工作，即避开该应用程序。

Answer 1

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

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

CameraRoll可以访问本地相机胶卷/图库。在使用之前，您必须链接RCTCameraRoll库。您可以请参阅Linking寻求帮助。

Expo有一个不同的API来整合图片库。您可以更多地了解here。

ImagePicker

提供对系统UI的访问，以便从中选择图像   手机的照片库或用相机拍照。

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

从Expo App中的CameraRoll.getPhotos（）中反映原生保存图像

1 个答案:

ImagePicker