javascript - 使用 React Navigation 访问 Redux 状态

Question

我有以下导航器使用 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 状态中。

由于我是从Home 场景访问User 场景，所以我可以在推送场景时传递用户名:

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

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

Answer 1

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

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

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

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

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