首页 > 解决方案 > React Native:react-native-image-picker 没有触发 launchImageLibrary 的回调

问题描述

我正在使用 React Native 构建一个移动应用程序。我的应用程序需要访问照片库和相机。我正在使用这个库,https://github.com/react-native-image-picker/react-native-image-picker。我可以启动照片库,但是当我选择照片时,它没有触发回调函数。

这是我的代码:

const renderPreviewImage = () => {
        if (! photoUri) {
            return null
        }

        return (
            <Image
                resizeMode={"cover"}
                resizeMethod={"scale"}
                style={{width: 200, height: 200}}
                source={{uri: photoUri}}
                />
        )
    }

    return (
        <View style={{flex: 1}}>
            <Button label={"Select Photo"} onPress={() => {
                launchImageLibrary({
                    mediaType: "photo"
                }, (response) => {
                    console.log('This is not triggered')
                })
            }} />
            {renderPreviewImage()}
        </View>
    )

正如您在代码中看到的注释,未调用回调。我的代码有什么问题,我该如何解决?

标签: react-native

解决方案


在 Button 的 onPress 中试试这个:

let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: false,
      quality: 1,
    });

    if (!result.cancelled) {
      //This is the image being returned
      setImage(result.uri);
    }
// This how you display the image in your main component below:
    {image && (
                  <Image source={{ uri: image }}
                    style={{ width: '100%', height: '100%' }} />
                )}

推荐阅读