StackNavigator vs createStackNavigator

Question

我正在将我的应用程序从React-Navigation 1.5升级到3.0.9。我不清楚组件状态管理有什么区别，但我敢肯定有一些。过去的工作正常，现在行为很奇怪。看来该州被以某种方式缓存，并且浏览并回到该组件时，state.params.letter仍然是相同的，即使我不需要。如果我改变视图，国家不应该被摧毁吗？

该组件具有非常简单的逻辑，它显示了一个项目的FlatList。如果存在prop letter，则仅显示以该字母开头的项目。

export default class Search extends Component {
    constructor(props) {
        super(props);
    }
    DB = null;
    componentDidMount(){
        //check for the param "letter"
        let L = this.props.navigation.state.params ? this.props.navigation.state.params.letter : null;
        this.setState({
            DB: L ? this.DB.getStartWith(L) : this.DB.getAll()
        })
    }
    render() {
        const { params } = this.props.navigation.state;
        const { t, i18n, navigation } = this.props;

        return (
            <View>
                <FlatList data={this.state.DB}
                    renderItem=({item}) => <Text> {item} </Text>
                />
            </View>
        );
    }
}

Answer 1

react-nvigation stack导航器的工作方式，它存储了不同屏幕的堆栈，因此当您的后按钮时，它知道您上次访问的哪个屏幕。当您通过类似于情况的参数时：

this.props.navigation.state.params.letter

状态被存储在React Navigation堆栈中，并将停留在那里，直到您"销毁"屏幕（例如，从该屏幕上返回），例如，如果您的堆栈看起来像（Screen1>>）搜索）然后移动到Screen2，以便它变为（screet1> search2）搜索组件的内部状态将被销毁，而不是React Navigation State ，因此，如果您返回参数字母将是相同的，销毁该参数的唯一方法是返回屏幕1。一种替代方法是使用Redux 之类的内容存储您的字母参数，通常我会尝试避免使用React-Navigation参数传递变量，除非它是与导航本身相关的参数（例如导航选项）。