代码之家  ›  专栏  ›  技术社区  ›  alfredopacino

StackNavigator与createStackNavigator

  •  0
  • alfredopacino  · 技术社区  · 5 年前

    我正在将我的应用程序从react navigation 1.5升级到3.0.9。 我不清楚组件状态管理有什么区别,但我肯定有一些区别。以前工作得很好,现在表现得很奇怪。看起来状态是以某种方式缓存的,浏览并返回到这个组件, state.params.letter 还是一样的,即使我不需要。如果我改变看法,国家不应该被摧毁吗?

    组件有一个非常简单的逻辑,它显示了 FlatList 项目的。如果道具 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>
            );
        }
    
    }
    
    0 回复  |  直到 5 年前
        1
  •  0
  •   lamazing    5 年前

    react navigation stack navigator的工作方式是,它存储不同屏幕的堆栈,这样当您按下back按钮时,它就知道您上次访问的是哪个屏幕。当您传递一个与您的情况类似的参数时:

    this.props.navigation.state.params.letter

    状态存储在react导航堆栈中,并将一直保存到您“销毁”屏幕为止 (例如,从该屏幕返回),例如,如果堆栈看起来像(screen1>search),然后移动到screen2,使其变为(screen1>search>screen2) 搜索组件的内部状态将被破坏,但不会破坏react导航状态 ,因此如果返回参数字母将相同,则销毁该参数的唯一方法是返回屏幕1。另一种方法是存储字母参数 使用类似redux的东西