使用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状态.

因为我User从Home场景中访问场景,所以当我推动场景时我可以传递用户的名字:

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

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

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