screenProps.object 在 navigationOptions 中返回 ALWAYS null

Question

我想将获取的道具中的部分数据（用户名）放在导航标题上。请看我的navigationOptions。

  static navigationOptions = ({navigation, screenProps}) => ({
    ...
    title: !_.isNil(screenProps.outfitDetail) ? 
    `${screenProps.outfitDetail.user.username}'s Post`: ''
  });

我的问题是title 总是返回一个空白字符串，因为screenProps.outfitDetail 总是为空。我在这里做错了什么？为什么总是返回null？

我在componentWillMount() 上使用 Redux 获取了 suitDetail 道具

componentWillMount() {
    const { id } = this.props.navigation.state.params;
    const { token, hType} = this.props;
    this.props.fetchOutfitDetail(token, hType, id);
  }

我可以从render() function 那里获得outfitDetail 道具。

render () {
    const detail = this.props.outfitDetail;
    if(detail) {
      return (
        <ScrollView style={styles.root}>
        ...

我通过它的 id 调用我的组件

this.props.navigation.navigate('OutfitDetail', {id})

在用户资料上做同样的事情

console.log(this.props.currentUser.username); <- prints username
this.props.navigation.navigate('Profile', {username:this.props.currentUser.username});

但在个人资料屏幕中，也无法获取screenProps.username。

Answer 1

您无法使用screenProps 访问屏幕的组件属性。要在 navigationOptions 中使用 Redux 存储中的值，您可以在此线程中查看解决方案：

https://github.com/react-community/react-navigation/issues/940

解决方案 1：

static navigationOptions = {
  headerTitle: <SomeTitle />
};

SomeTitle 是一个 Redux 连接组件。

解决方案 2：

将状态作为导航助手传递给您的根导航器

<MainNavigator 
  navigation={addNavigationHelpers({ 
    dispatch, 
    state: state.nav, 
    globalState: state 
  })}
/>

并像这样使用它

static navigationOptions = ({ navigation }) => ({
  ... 
  title: globalState.path.to.your.data
});