要实现按下返回按钮后,React Navigation的状态保持不变,可以使用以下方法:
createStackNavigator
函数创建StackNavigator,并使用createAppContainer
函数将StackNavigator包装成AppContainer。将AppContainer作为根组件渲染。import { createAppContainer, createStackNavigator } from 'react-navigation';
import Screen1 from './Screen1';
import Screen2 from './Screen2';
const StackNavigator = createStackNavigator({
Screen1: { screen: Screen1 },
Screen2: { screen: Screen2 },
});
const AppContainer = createAppContainer(StackNavigator);
export default class App extends React.Component {
render() {
return ;
}
}
navigation.addListener
方法监听willFocus
事件。在willFocus
事件中,将需要保持状态的数据存储到组件的state中。import React from 'react';
import { View, Text, Button } from 'react-native';
export default class Screen1 extends React.Component {
state = {
count: 0,
};
componentDidMount() {
this.props.navigation.addListener('willFocus', this.load);
}
componentWillUnmount() {
this.props.navigation.removeListener('willFocus', this.load);
}
load = () => {
// 从存储中加载数据并更新state
this.setState({ count: storedCount });
};
render() {
return (
Count: {this.state.count}
);
}
}
在StackNavigator的每个屏幕组件中,使用componentDidMount
和componentWillUnmount
生命周期方法来添加和移除事件监听器。
在监听willFocus
事件的处理函数中,从存储中加载需要保持的数据,并更新组件的state。
在需要保持状态的数据发生变化时,将数据存储到存储中。
请注意,以上代码示例中的 storedCount
和 storeCount
需要根据你的实际情况进行替换。这是一个简单的示例,你可能需要根据实际需求进行适当的修改。