Question

我正在尝试开发一个用户可以在其中选择照片的应用程序，但是在关闭并重新打开该应用程序时，当他们打开该应用程序时会显示该照片。我正在尝试使用AsyncStorage存储照片信息，以便在应用程序重新打开时可以显示它。我一直在获取[对象对象]，所以不确定是希望对象还是照片中的对象。甚至在我将照片保存到Asyncstorage中之前，其来源似乎都是[Object object]，所以我很困惑。这是我的上下文代码：

export default class GroundingBox extends React.Component {

constructor(props) {
super(props);

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


async saveKey(key, value){
value = JSON.stringify(value);
try {
  await AsyncStorage.setItem(key, value);
} catch (error) {
  // Error saving data
  console.log("Error: could not save data" + error);

 }
}

async getKey(key){
try {
  var value = await AsyncStorage.getItem(key);
  value = JSON.parse(value);
  return value;
} catch (error) {
  console.log("Error retrieving data" + error);
}
}

state = {
avatarSource: null,
songTitle: null,
};

async checkPhoto(){
 source = await this.getKey('GroundingPhoto');

 if (source != null){


console.log("This is what source does look like: " + source);

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


 async checkSongTitle(){

  if (await this.getKey('SongTitle') != null){

   source = await this.getKey('SongTitle');

   //console.log("This is what source does look like: " + source);

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


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

 setTimeout(() => {

 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 };
   console.log("This is what source should look like: " + source);
    this.setState({
      avatarSource: source,
    });
  }
})
}, 500);

await this.saveKey('GroundingPhoto', this.state.avatarSource);
//console.log("AVATAR:" + this.state.avatarSource);

//TODO: Photo no longer saves upon app close

 }




 render() {

this.checkPhoto();

return (


<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
    <View
            style={[
              styles.avatar,
              styles.avatarContainer,
              { marginBottom: 20 },
            ]}
            >

    {(this.state.avatarSource == null) ? (
      <Button
      type="custom"
      backgroundColor={"#7bd2d8"}
      borderColor={"#16a085"}
      borderRadius={10}
      shadowHeight={5}
      containerStyle={styles.buttonContainer}
      contentStyle={styles.content}
      onPress={this.selectPhotoTapped.bind(this)}> Select a Photo </Button>
    ) : (
      <Image style={styles.avatar} source={this.state.avatarSource} />
    )}

    </View>

Answer 1

setState函数不会立即更改状态。因此，您不能简单地做到这一点：

this.setState({avatarSource: source});
await this.saveKey('GroundingPhoto', this.state.avatarSource);

此外，在当前的实现中，saveKey()在设置avatarSource之前被执行

相反，只需执行以下操作：

this.setState({avatarSource: source});
this.saveKey('GroundingPhoto', source);

Answer 2

我浏览了有关react-native-image-picker的文档，发现this

在iOS上，不要假设返回的绝对uri将持续存在。看到 #107

尽管＃107提出了很多解决方案，但如果我是您，我宁愿先存储图像的base64，然后将其取回

异步存储本机获取项目

2 个答案: