在 React Navigation 中更新另一个屏幕的状态答案

【问题标题】：Updating State of Another Screen in React Navigation在 React Navigation 中更新另一个屏幕的状态
【发布时间】：2018-10-28 14:52:34
【问题描述】：

import { createStackNavigator, createDrawerNavigator } from 'react-navigation'
import { Button, Text } from 'react-native'
import React, { Component } from 'react'

// Components

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {value: 1}
  }

  render() {
    return (<Text>{this.state.value}</Text>)
  }
}

class Settings extends Component {
  _press = function () {
    // Update Home's state here
  }

  render() {
    return (<Button title='Update Home' onPress={this._press.bind(this)}></Button>)
  }
}

// Navigation

const homeNavigator = createStackNavigator({
  HomeScreen: {screen: Home}
})

const settingsNavigator = createStackNavigator({
  SettingsScreen: {screen: Settings}
})

const drawerScreens = createDrawerNavigator({
  Home: homeNavigator,
  Settings: settingsNavigator
})

export default createStackNavigator({
  drawer: { screen: drawerScreens, navigationOptions: { header: null } }
})

我正在尝试通过设置中的按钮更新主页的状态同时停留在同一屏幕上（不使用this.props.navigation.navigate），但是在搜索了几个小时后我就是想不通怎么做。

如果没有像 Redux 这样的东西，这甚至可能吗？我最初决定使用 Redux 来解决这个问题，但当我发现他们在本赛季放弃了官方支持时，我决定放弃。

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

这可以通过使用NavigationActions.setParams 来实现，如下所示：

import { NavigationActions } from 'react-navigation';

const setParamsAction = NavigationActions.setParams({
  params: { value: 2 },
  key: 'screen-123',
});
this.props.navigation.dispatch(setParamsAction);

请注意，您需要使用主屏幕键。然后在您的主屏幕中，您需要收听不断变化的 navigation 道具并根据该变化采取行动。这可以通过添加componentWillRecieveProps React 生命周期事件或使用getDerivedStateFromProps 静态方法来实现。您的参数将在this.props.navigation.state.params 下。

看看here

【讨论】：

啊，这似乎可以通过将键存储在另一个 JS 文件中的映射中，并为每个类导入相同的映射 - 但是 componentWillRecieveProps 似乎永远不会在调度操作时触发，或者通过派出后回国。有什么原因吗？
setParams 应该触发componentWillRecieveProps，验证您使用的密钥是否正确。返回不会触发任何事情，因为屏幕始终处于挂载状态，并且没有任何道具发生变化

【解决方案2】：

就我而言：

我在我的主屏幕模块中创建了一个状态变量（称为 testValue）。在导航期间将此变量传递给屏幕 2。在屏幕 2 中对其进行修改，然后在返回时将其传递回主屏幕。

主屏幕：这里我们创建一个变量 testValue，它打印在主屏幕上。我们还有一个导航到屏幕 2 的按钮。我们还将 testValue 变量传递到屏幕 2。

function HomeScreen({ navigation }) {
  const [testValue, setTextFeed] = useState(0); 

  return (
    <View >
      <Text>{testValue}</Text>
      <Button
          onPress={() => {
            navigation.navigate("Screen 2", {
              value: testValue,
            });
          }}
      >
    </View>
  );
}

屏幕 2：这里我们检索从主屏幕传递的 testValue 变量（它存储在路由参数中）。每次用户按下 button1 时，testValue 都会增加 5 个单位。第二个按钮将导航回 HomeScreen。因为我们已经将 testValue 传递回主屏幕，所以打印在主屏幕上的值将被更新。注意：主屏幕不需要路由参数。

function Screen2({ route, navigation }) {
  const { testValue} = route.params;
  const addFunc = () => {
    testValue += 5
  };

  return (
    <View >
      <Text>{testValue}</Text>

      //button1 this button increments testValue
      <Button
          onPress={() => addFunc()}
      >

      //button2 this button navigates to home screen
      <Button
          onPress={() => {
            navigation.navigate("HomeScreen", {
              value: testValue,
            });
          }}
      >
    </View>
  );
}

【讨论】：