当我选择该选项时，React-native-image-picker 不会启动图库 [英] React-native-image-picker doesn't launch gallery when i select the option

问题描述

当我点击选择照片按钮时，会弹出拍摄照片并从图库选项中进行选择.但是当我点击这些选项时，什么也没有发生.我现在正在 Windows 上工作.我在 mac 中尝试了相同的代码，选择该选项只是将我带到主屏幕.请帮忙.

When i click on the select a photo button, Take a photo and select from gallery options pop up. But when i click at those options nothing happens. I am working on windows right now. I tried the same code in mac, selecting the option simply took me to the home screen. Please help.

import React, { Component } from 'react';
import {AppRegistry,View,Text,Image, StyleSheet,PixelRatio,TouchableOpacity } from 'react-native';
import {
  Container,
  List,
  ListItem,
  Content,
  Footer,
  FooterTab,
  Header,
  Button,
  Icon,
  Tabs,
  Title,
  InputGroup,
  Input
} from 'native-base';
import{
Actions,
Scene,
Router
}from 'react-native-router-flux';

import ImagePicker from 'react-native-image-picker';
import Reg from './Reg'

export default class Log extends Component{
  state = {
    avatarSource: null,
  };

  selectPhotoTapped() {
    const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: {
        skipBackup: true
      }
    };

    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled photo picker');
      }
      else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      }
      else {
        let source = { uri: response.uri };

        this.setState({
          avatarSource: source
        });
      }
    });
  }


  render(){
    return(

      <Container>
      <View style={styles.container}>
        <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
          <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 20}]}>
          { this.state.avatarSource === null ? <Text>Select a Photo</Text> :
            <Image style={styles.avatar} source={this.state.avatarSource} />
          }
          </View>
        </TouchableOpacity>
      </View>

          <Content style={{flex:1, marginTop:80}}>
            <List>
            <ListItem>
            <InputGroup>
                  <Icon name='ios-at-outline' style={{color:'#5bc0de'}}/>
                  <Input placeholder="Email" />
            </InputGroup>
            </ListItem>
            <ListItem>
            <InputGroup>
                  <Icon name='ios-lock-outline' style={{color:'#5bc0de'}}/>
                  <Input placeholder="Password" secureTextEntry />
            </InputGroup>
            </ListItem>
            <View style={{marginTop:10}}>
            <Button info style={{alignSelf:'center'}} onPress={Actions.userprofile}>
            LOGIN
            </Button>
            </View>
            </List>

          </Content>

      </Container>

    );
  }
}
const styles = StyleSheet.create({
  container: {
    marginTop:50,
    justifyContent: 'center',
    alignItems: 'center',
  },
  avatarContainer: {
    height:100,
    width:100,
    borderColor: '#9B9B9B',
    borderWidth: 1 / PixelRatio.get(),
    justifyContent: 'center',
    alignItems: 'center'
  },
  avatar: {
    borderRadius: 75,
    width: 150,
    height: 150
  }
});

推荐答案

在AndroidManifest.xml中添加两个权限

Add two permission in AndroidManifest.xml

 <uses-permission android:name="android.permission.CAMERA" />

 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

这篇关于当我选择该选项时，React-native-image-picker 不会启动图库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！