使用图像选择器反应原生开放画廊

Question

//I was not able to open the gallery by using the react native image picker


import React, { useState } from 'react'
import { launchCamera, launchImageLibrary } from 'react-native-image-picker'
import * as ImagePicker from 'react-native-image-picker'
import { StyleSheet,Text,View,TouchableOpacity,Dimensions,Pressable,} from 'react-native'
import { TextInput } from 'react-native-gesture-handler'
    
    const WIDTH = Dimensions.get('window').width
    const HEIGHT_Modal = 250
    
    const UploadModal = ({ changeModalVis }) => {
        const [response, setResponse] = useState(null)
        console.log('res', response)
    
        const closeModal = (bool, data) => {
            changeModalVis(bool)
        }
    
        const options = {
            title: 'Select Image',
            type: 'library',
            options: {
                selectionLimit: 1,
                mediaType: 'photo',
                includeBase64: false,
            },
        }
    
        const openGallery = () => {
            ImagePicker.launchImageLibrary(options, setResponse)
        }

//render.....................................................

        return (
            <TouchableOpacity disabled={true} style={styles.container}>
                <View style={styles.modal}>
                    <View style={styles.textView}>
                        <Text
                            style={{
                                fontSize: 13,
                                padding: 10,
                                fontWeight: 'bold',
                                color: '#9b9e9e',
                            }}
                        >
                            Choose an option
                        </Text>
                        
                        <TouchableOpacity style={styles.pressableUpperBody}>
                            <Text style={styles.text} onPress={openGallery}>  <------error on press
                                Photos
                            </Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.pressableUpperBody}>
                            <Text style={styles.text}>Capture Image</Text>
                        </TouchableOpacity>
                    </View>
    
                    <View style={styles.pressableUpperBody}>
                        <TouchableOpacity
                            style={styles.pressable}
                            onPress={() => closeModal(false, 'cancel')}
                        >
                            <Text style={styles.text}>Cancel</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

export default UploadModal

//getting the following error when I press on photos onPress 
[Unhandled promise rejection: TypeError: null is not an object (evaluating '_reactNative.NativeModules.ImagePickerManager.launchImageLibrary')]

........................................................................................................................................................................................................

Answer 1

Did you make sure to clean your app and build again, you usually have to do that after installing a library that relies on native modules.

Basically you'll have to do stuff like cd ios && pod install cd android &&./gradlew clean close your bundler and build/run your app again, sometimes you might wanna clear the cache too.