如何在React Native中更新图像

我试图更新用户个人资料,但是个人资料图片只更改了一个。要更改它,每次必须每次更改图像名称来解决它时,我都尝试过用post方法发送请求,但是我api不支持发布。我将在下面发布我的代码。能有人帮我吗,谢谢。

class ProfileEdit extends Component {

  state = {
    username: '',email: '',about: '',userInfo: '',avatarSource: null,showAlert: false,showCancelButton: false,showConfirmButton: false,};

  constructor(props) {
    super(props);

    this.selectPhotoTapped = this.selectPhotoTapped.bind(this);
  }

  hideAlert = () => {
    this.setState({
      showAlert: false
    });
  };

  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 {
        const source = { uri: response.uri }
        this.setState({
          avatarSource: source,});
        this.upLoadImage(response.uri);
      }
    });
  }

  upLoadImage = async (image_uri) => {
    const value = await AsyncStorage.getItem('userToken');
    //alert(value)
    var url = 'http://www.dev.beta.duklr.com:8000/api/v2/profile/';
    var b_url = url + value + '/';

    let data = new FormData();
    data.append('photo',{ type: 'image/jpg',uri: image_uri,name: 'profile_image1.jpg' });
    data.append('Content-Type','image/jpg');
    fetch(b_url,{
      method: 'PUT',body: data
    }).then((res) => res.json())
      .then((res) => {
        // alert("response" + JSON.stringify(res)); 
      })
      .catch((e) => this.setState({
        showAlert: true,message: e,showCancelButton: true,cancelText: 'close',}))
      .done()
  }

  componentDidmount = async () => {
    const value = await AsyncStorage.getItem('userToken');
    //alert(value)
    var url = 'http://www.dev.beta.duklr.com:8000/api/v2/profile/';
    var b_url = url + value + '/';

    //alert(value);

    return fetch(b_url)
      .then(res => res.json())
      .then(res => {
        this.setState(
          {
            isLoading: false,refreshing: false,userInfo: res,function () { }
        );
      })
      .catch(error => {
        this.setState({
          showAlert: true,message: error,})
      });
  }



  onUpdate = async () => {

    const value = await AsyncStorage.getItem('userToken');

    var url = 'my_api';
    var b_url = url + value + '/';

    //alert(b_url);

    const { email,about,avatarSource } = this.state;
    //alert(`${email},${about}`);
    fetch(b_url,headers: {
        accept: 'application/json','Content-Type': 'application/json',body: JSON.stringify({
        email: email,about_us: about,}),})
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          showAlert: true,message: "Saved successfully",})
        // this.setState({
        //   dataSource: responseJson.promptmsg,// })
      })
      .catch((error) => {
        this.setState({
          showAlert: true,})
      });
  }
  catch(errors) {
    this.setState({
      showAlert: true,message: errors,});
  }

  render() {
    const value_email = this.state.userInfo.email;
    const value_about = this.state.userInfo.about_us;
    return (
      <View style={styles.continer}>
        <ScrollView>
          <View style={{ alignItems: 'center',padding: 20 }}>
            <Avatar
              source={this.state.avatarSource}
              size="xlarge"
              // showEditButton
              onPress={this.selectPhotoTapped.bind(this)}
            />
          </View>
          <View style={styles.textContiner}>
            {/* <TextField
              label='User Name'
              title={this.state.userInfo.name}
              value={this.state.username}
              onChangeText={(username) => this.setState({ username })}
            /> */}
            <TextField
              label='Email Id'
              placeholder={value_email}
              //value={value_email}
              onChangeText={(email) => this.setState({ email })}
            />
            <TextField
              label='About'
              //value={value_about}
              placeholder={value_about}
              onChangeText={(about) => this.setState({ about })}
            />
            <View style={{ marginTop: 20 }}>
              <Button
                title="Save"
                onPress={this.onUpdate.bind(this)}>
              </Button>
            </View>
          </View>
        </ScrollView>
        <AwesomeAlert
          show={this.state.showAlert}
          showProgress={false}
          title="Hello There"
          message={this.state.message}
          closeonTouchOutside={true}
          closeonHardwareBackPress={true}
          showCancelButton={this.state.showCancelButton}
          showConfirmButton={this.state.showConfirmButton}
          cancelText={this.state.cancelText}
          confirmText={this.state.confirmText}
          confirmButtonColor="#DD6B55"
          onCancelpressed={() => {
            this.hideAlert();
          }}
          onconfirmpressed={() => {
            this.hideAlert();
          }}
        />
      </View>
    );
  }
}
export default ProfileEdit;
feng215 回答:如何在React Native中更新图像

Avatar是否基于React Native的Image?以我的经验,React Native附带的Image组件是非常有问题的。确实,重载问题就是其中之一。我经常用FastImage代替Image

本文链接:https://www.f2er.com/3111169.html

大家都在问