Javascript 在“新建选项卡”屏幕中使用异步存储加载数据_Javascript_React Native_React Navigation_Asyncstorage

Javascript 在“新建选项卡”屏幕中使用异步存储加载数据

javascript react-native

Javascript 在“新建选项卡”屏幕中使用异步存储加载数据,javascript,react-native,react-navigation,asyncstorage,Javascript,React Native,React Navigation,Asyncstorage,我应该如何使用异步存储在新的导航屏幕中显示数据我尝试为存储中的项目设置状态： _retrieveData = async () => { try { const value = await AsyncStorage.getItem('sightings'); if (value !== null) { console.log(value); this.setState({ sightings: JSON.parse(valu

我应该如何使用异步存储在新的导航屏幕中显示数据

我尝试为存储中的项目设置状态：

_retrieveData = async () => {
    try {
      const value = await AsyncStorage.getItem('sightings');
      if (value !== null) {
        console.log(value);
        this.setState({ sightings: JSON.parse(value) });
      }
    } catch (error) {
      console.log(error);
    }
  }

但我不知道该把这个放在哪里？组件将装载一次？但是，如果我导航回另一个屏幕，然后再次返回到必须加载数据的屏幕，该怎么办

或者我想不使用state，而是在模板中使用_retrieveData作为变量

render() {    
    return (<Container>
        <Content>
          <List>
          {_retrieveData.map(sighting => {
              <ListItem>
                <Left>
                  <Text>{sighting.species}</Text>
                </Left>
                <Body>
                  <Text>{sighting.timestamp}</Text>
                </Body>
                <Right>
                  <Badge success>
                    <Text>{sighting.counter}</Text>
                  </Badge>
                </Right>
              </ListItem>
            })}
          </List>
        </Content>
      </Container>
    );
  }

render（）{
返回(
{u retrieveData.map（视觉=>{
{目击。物种}
{signing.timestamp}
{瞄准台}
})}
);
}

这是我的导航：

export default (MainScreenNavigator = createBottomTabNavigator(
  {
    Start: { screen: AddSighting },
    Sightings: { screen: Sightings }
  },
  {
    tabBarPosition: "bottom",
    tabBarComponent: props => {
      return (
        <Footer>
          <FooterTab>
            <Button vertical onPress={() => props.navigation.navigate("Start")}>
              <Icon name="apps" />
              <Text>Add sightings</Text>
            </Button>
            <Button
              badge
              vertical
              onPress={() =>
                props.navigation.navigate("Sightings", {
                  onNavigate: this.handleOnNavigate
                })
              }
            >
              <Badge>
                <Text>2</Text>
              </Badge>
              <Text>Sightings</Text>
              <Icon name="menu" />
            </Button>
          </FooterTab>
        </Footer>
      );
    }
  }
));

导出默认值（MainScreenNavigator=CreateBoottomTabNavigator(
{
开始：{screen:addsigning}，
目击：{屏幕：目击}
},
{
tabbar位置：“底部”，
tabBarComponent:props=>{
返回(
props.navigation.navigate（“开始”）}>
添加目击
道具.导航.导航（“目击”{
onNavigate:this.handleOnNavigate
})
}
>
2.
目击
);
}
}
));

我不确定这应该如何通过react方式完成？

react导航

支持屏幕。通过这种方式，您可以更新数据，在这种情况下，您可以从

AsyncStorage

addListener-订阅导航生命周期的更新

React Navigation向订阅它们的屏幕组件发出事件：

```
将模糊
```
-屏幕将不聚焦
```
将聚焦
```
-屏幕将聚焦
```
didFocus
```
-屏幕聚焦（如果有转换，转换完成）
```
didBlur
```
-屏幕未聚焦（如果有转换，转换完成）

来自文档的示例

const didBlurSubscription = this.props.navigation.addListener(
  'didBlur',
  payload => {
    console.debug('didBlur', payload);
  }
);

// Remove the listener when you are done
didBlurSubscription.remove();

// Payload

{
  action: { type: 'Navigation/COMPLETE_TRANSITION', key: 'StackRouterRoot' },
  context: 'id-1518521010538-2:Navigation/COMPLETE_TRANSITION_Root',
  lastState: undefined,
  state: undefined,
  type: 'didBlur',
};