如何在React Native中存储图像?

时间:2019-03-06 07:08:29

标签: react-native

我是新来的本地人。当我转到主要活动并返回第二个活动时,我想在第二个活动中保持图像。我无需再次上传图片。

这是我的代码:

class FirstActivity extends Component {
            static navigationOptions = {
            title: 'Main Screen'
          }

Send_Data_Function = () => { this.props.navigation.navigate('Second', { no: this.state.number, }); }

        render() {
            return (
                    <TouchableOpacity>
                        <Text style={styles.TextStyle}> NEXT </Text>
                    </TouchableOpacity>/>
        )}

这是第二项活动:

constructor() {
    super();
    this.state = {
      ImageSource: null,
      data: 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({
          ImageSource: source,
          data: response.data

        });
      }
    });
  }

  uploadImageToServer = () => {

    RNFetchBlob.fetch('POST', 'http://xxx.xxx.xx.x/upload_image.php', {
      Authorization: "Bearer access-token",
      otherHeader: "foo",
      'Content-Type': 'multipart/form-data',
    }, [
        { name: 'image', filename: 'image.png', type: 'image/png', data: this.state.data },
      ]).then((resp) => {
        var tempMSG = resp.data;
        Alert.alert(tempMSG);
      }).catch((err) => {
      })
  }

  render() {
    return (
      <View style={styles.container}>

        <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
          <View style={styles.ImageContainer}>
            {this.state.ImageSource === null ? <Text>Select a Photo</Text> :
              <Image style={styles.ImageContainer} source={this.state.ImageSource} />
            }
          </View>
        </TouchableOpacity>

        <TouchableOpacity onPress={this.uploadImageToServer} activeOpacity={0.6} style={styles.button} >
          <Text style={styles.TextStyle}> UPLOAD IMAGE</Text>
        </TouchableOpacity>
      </View>
    );
  }

在第二个活动中如何维护图像?仅当我上传新图像时,它才会更新。

0 个答案:

没有答案