React Native-选择图像后iOS应用程序卡住,并且图像未显示在imageview上

时间:2019-11-25 08:39:37

标签: javascript react-native react-native-image-picker

我是React Native的新手,我试图在我的应用程序中显示来自Gallery的图像。从图库中选取图片后,图片不会显示在应用程序上,并且按钮(即TouchOpacity)和后退导航按钮也将停止工作。请帮我解决这个问题。

Android 运行正常。但是iOS正在做奇怪的事情。

这是我的代码:

import React from 'react';
import ImagePicker from 'react-native-image-picker';

import {
  StyleSheet,
  View,
  TextInput,
  Image,
  Text,
  TouchableOpacity,
  Alert,
} from 'react-native';


export default  class AddNewProductPage extends React.Component {
  static navigationOptions = {
    title: 'Add Product',
  };

  constructor(props){
    super(props)
    this.state = {
      filepath: {
        data: '',
        uri: ''
      },
    }
  }


  _showImagePickerOptions(titleVal, messageVal) {
    Alert.alert(
      titleVal,
      messageVal,
      [
        { 
          text: "Camera",
          onPress: () => console.log("Camera pressed")
        },
        {
          text: "Photo Gallery",
          onPress: () => console.log("Photo Gallery pressed"),
        },
        { 
          text: "Cancel", onPress: () => console.log("Cancel pressed..."),
          style: "cancel"
        }
      ],
      { cancelable: false }
    );
  }

  _handleSignUp() {
    this._showImagePickerOptions("Upload Product Photo", "Please upload product photo using below options")
  }

  render() {
    const {navigate} = this.props.navigation;
    return (
      <View>
        <View style={{marginTop: 20}} >
          <Text style={styles.titleTextStyle}>
            PRODUCT PHOTO 
          </Text>
        </View>
        <View style={{flexDirection: 'row', borderRadius: 18, borderColor: '#d8d8d8', borderWidth:1, height: 150, marginLeft: 18, marginRight: 18, marginTop: 10}}>
          <TouchableOpacity onPress={() => this.chooseImage()} style={{height: 150, marginLeft: 0, marginRight: 0}}>
            {this.renderFileData()}
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  chooseImage = () => {
    let options = {
      title: 'Select Image',
      // customButtons: [
      //   { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
      // ],
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };

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

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

        // You can also display the image using data:
        // const source = { uri: 'data:image/jpeg;base64,' + response.data };
        // alert(JSON.stringify(response));s
        console.log('response', JSON.stringify(response));
        this.setState({
          filePath: response,
          fileData: response.data,
          fileUri: response.uri
        });
      }
    });
  }

  renderFileData() {
    if (this.state.fileData) {
      return <Image source={{ uri: 'data:image/jpeg;base64,' + this.state.fileData }}
        style={styles.images}
      />
    } else {
      return <Image source={require('./Images/mail_icon.png')}
        style={styles.images}
      />
    }
  }
}

const styles = StyleSheet.create({
  image_container: {
    flex: 1,
    // remove width and height to override fixed static size
    width: null,
    height: null,
  },
  imageIcons: {
    left: 11,
    top: 14,
  },
  textInputContainer: {
    flexDirection:'row',
    padding: 0,
    marginLeft: 18,
    marginRight: 18,
    marginTop: 14,
    height: 42,
  },
  txtInput: {
    flex:1, 
    height:42,
    fontSize: 18,
  },
  titleTextStyle: {
    textAlign: "left",
    fontSize: 14,
    fontWeight: '500',
    color: '#161616',
    marginLeft: 18,
  },
  images: {
    width: 150,
    height: 150,
    borderColor: 'black',
    borderWidth: 1,
    marginHorizontal: 3
  },
});

我正在为此实现 react-native-image-picker

0 个答案:

没有答案