javascript - 使用React Navigation访问Redux状态

我有以下使用React-Navigation的导航器:

const Navigator = StackNavigator(
  {
    Home: {
      screen: Home
    },
    User: {
      screen: User
    }
  }
)

还有我的User组件:

export default class User extends Component {
  static navigationOptions = {
    title: () => 'User'
  }

  render() {
    return (
      <Text>This is the user page.</Text>
    )
  }
}

我希望User场景的导航栏的标题为用户的名称。名称保留在Redux状态内。

由于我正在从User场景访问Home场景，因此在按下场景时可以传递用户名:

this.props.navigation.navigate('User', {name: user.name})

但是，如果在User上更新了用户名，则导航标题将不会更新。我看到的唯一解决方案是从navigationOptions中访问Redux状态。有没有办法做到这一点，或者有更好的办法来解决这个问题？谢谢。

最佳答案

我在react-navigations GitHub存储库上的issue中找到了2个解决方案。

1)每次 Prop 更改时更新this.props.navigation.state:

componentWillReceiveProps(nextProps) {
  if (nextProps.totalCharge) {
    this.props.navigation.setParams({ totalCharge });
  }
}

2)创建一个连接到Redux状态的NavigationTitle组件:

static navigationOptions = {
  title: (navigation) => <MyConnectedTitle navigation={navigation} />
}

关于javascript - 使用React Navigation访问Redux状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42334503/