在新选项卡屏幕中使用 AsyncStorage 加载数据答案

【问题标题】：Loading data with AsyncStorage in new Tab Screen在新选项卡屏幕中使用 AsyncStorage 加载数据
【发布时间】：2018-07-16 09:03:08
【问题描述】：

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

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

_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);
    }
  }

但我不确定在哪里设置？ ComponentWillMount 会加载一次吗？但是，如果我导航回另一个屏幕，然后再次返回到必须加载数据的那个屏幕呢？

或者我认为不使用 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>
    );
  }

这是我的导航：

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>
      );
    }
  }
));

我不确定这应该如何以反应方式完成？

【问题讨论】：

标签： javascript react-native react-navigation asyncstorage

【解决方案1】：

react-navigation支持adding listeners到屏幕。通过这种方式，您可以更新数据，在您的情况下重新读取来自 AsyncStorage 的值

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

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

willBlur - 屏幕将失焦

willFocus - 屏幕将聚焦

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',
};

【讨论】：