我应该如何使用异步存储在新的导航屏幕中显示数据？
我试图为存储中的项目设置一个状态：
_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);
}
}
但我不确定该把它放在哪里？组件WillMount将加载一次？但是，如果我导航回另一个屏幕，然后再次回到必须加载数据的屏幕，该怎么办？
或者我想不使用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>
);
}
}
));
我不确定这应该怎么做——反应方式？
react-navigation支持在屏幕上添加监听器。通过这种方式，您可以更新数据，在您的情况下，从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',
};