Question

当我点击选择照片按钮时，拍摄照片并从弹出的图库选项中选择。但是，当我点击这些选项时，没有任何反应。我现在在Windows上工作。我在mac中尝试了相同的代码，选择该选项只需将我带到主屏幕。请帮忙。

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
  }
});

Answer 1

在AndroidManifest.xml中添加两个权限

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

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

当我选择该选项时，React-native-image-picker不会启动图库

1 个答案: