reactjs - 在 React Navigation 中更新另一个屏幕的状态

Question

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 } }
})

我正在尝试通过“设置”中的按钮更新 Home 状态 同时停留在同一个屏幕上 (不使用 this.props.navigation.navigate )，但是在搜索了几个小时之后，我就是不知道该怎么做。

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

Answer 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