多次通过this.props.navigation传递变量

Question

因此，对于乞求，在# 1. a_b (c) # 2. d_e (f) # 3. g_h (i) # 4. j_k (l) 中可以通过react-native-navigation传递一些数据。

这是传递数据的方式：

this.props.navigation.navigate()

因此，解决问题

遇到此问题的情况：

我有一个单击的项目列表，然后导航到下一个屏幕，在导航过程中发送了按下项目的数据，当我进入下一个屏幕时，将传递的数据分配给状态，我将对其进行进一步的操作。这是我用于传递数据的命令：

传递数据

this.props.navigation.navigate('RouteName', {/*Data to pass*/})

接收数据

this.props.navigation.navigate('Screen2',{param1: value1, param2: value2})

问题本身

我的问题是，如果我返回第一个屏幕，然后按另一个项目，那么它的数据没有通过ComponentWillMount = () => { const param1 = this.props.navigation.getParam('param1'); const param2 = this.props.navigation.getParam('param2'); this.setState({param1, param2)} } 传递，那么第二个屏幕上的数据在第一个导航过程中仍然没有被修改。该问题如何解决？

Answer 1

我想我明白了， 我能够使用react-navigation 3.0.5中的抽屉导航器和选项卡式导航器来复制问题。 基本上，即使您运行navigation.goBack，它们也会保存组件。 屏幕不会再次挂载，因此它不会调用componentWillMount（），也不会在其中检查数据。

有2种（编辑3）解决方法。

一个是要关闭此性能增强功能

const MyApp = createDrawerNavigator(
  {
    Screen1: Screen1,
    Screen2: Screen2
  },
  {
    unmountInactiveRoutes: true
  }
);

第二个选项，一种更优雅的选择是订阅导航事件

componentWillMount() {
    console.log("mounting");
    const willFocusSubscription = this.props.navigation.addListener(
        "willFocus",
        () => {
            console.debug("willFocus");
            const thing = this.props.navigation.getParam("thing");
            const thing2 = this.props.navigation.getParam("thing2");
            this.setState({thing, thing2});
        }
    );
}

别忘了退订componentWillUnmount

componentWillUnmount() {
    willFocusSubscription.remove();
}

第三种方式与第二种方式基本相同，但以声明方式订阅。这意味着没有componentWillMount或WillUnmount。

首先是一个回调，以正确设置状态

willFocus = ({action}) => {
    console.debug("willFocus", action);
    const thing = action.params["thing"];
    const thing2 = action.params["thing2"];
    this.setState({thing, thing2});
};

现在在渲染器中添加组件

render() {
    console.log("data is:", this.state.thing);
    return (
        <View style={styles.container}>
            <NavigationEvents
                onWillFocus={this.willFocus} 
            />
          .... rest of render body
        </View>
    );
}

这不会显示任何内容，但是会进行订阅和取消订阅。