使用React导航访问REDUX状态

Question

i使用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

我从react-navigations github repo的问题中找到了2个解决方案。

1）更新this.props.navigation.state每次道具更改时：

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

2）创建连接到Redux状态的NavigationTitle组件：

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

Answer 2

我假设您正在调用

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

来自组件。因此，您应该在组件中使用用户的名称进行mapStateToProps，然后将其作为{name: ...变量传递。

例如：

export class Component {
  render() {
    return (
      <View>
        <Button onPress={() => this.props.navigation.navigate('User', {name: this.props.userName})}
      </View>
    )
  }
}
const mapStateToProps = (state) => ({
  userName: state.user.name
})
export default connect(mapStateToProps)(Component)