Javascript 在TabNavigator中反应导航通行道具

在初始屏幕上，我有从服务器加载的道具。我想将它们传递到其他选项卡屏幕。然而，我没有在网上找到任何例子。我知道电影道具，但不知道如何设置。我尝试过的所有方法都会导致错误

const EProj = TabNavigator({
  Home: { screen: HomeScreen },
  Map: { screen: MapG },
  Login: { screen: Login },
  Profile: { screen: Profile },
}, {
  tabBarPosition: 'bottom',
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#1abc9c',
  },
});

这是我的屏幕设置。我应该把电影道具放在哪里

<EProj
  screenProps={cats}
/>

任何好的例子都会有帮助。提前谢谢

主屏幕设置：

class HomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
  };

...

  componentWillMount(){
    console.log("Starting to load assets from server!");
    this.onLoadCats(); /*starts asset loading*/
  }

  render() {
    return (
      <View style={styles.container}>

        <Text>Welcome to alpha 1.17 This is hard system test.</Text>
        <AssetsLoad catsL={this.state.catsL} />
      </View>
    );
  }
}

类主屏幕扩展React.Component{
静态导航选项={
tabBarLabel:“主页”，
};
...
组件willmount（）{
log（“开始从服务器加载资产！”）；
此.onLoadCats（）；/*启动资源加载*/
}
render（）{
返回(
欢迎来到alpha 1.17这是一个艰难的系统测试。
);
}
}

您可以创建一个可以返回导航的高阶组件，在该组件的

componentDidMount

中，您可以加载数据并通过

屏幕道具传递

示例

const EProj = TabNavigator({
  Home: { screen: HomeScreen },
  Map: { screen: MapG },
  Login: { screen: Login },
  Profile: { screen: Profile },
}, {
  tabBarPosition: 'bottom',
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#1abc9c',
  },
});

class MainNavigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {cats: []};
  }
  componentDidMount() {
    this.onLoadCats().then((cats) => this.setState({ cats: cats }));
  }
  render() {
    return(<EProj screenProps={{ cats: this.state.cats}} />
  }
}

// Now you can do in your screens
console.log(this.props.screenProps.cats);

/* This is next line is wrong, please check update above */ 
/* console.log(this.props.navigation.state.params.cats); */

const EProj=TabNavigator({
主屏幕：{屏幕：主屏幕}，
映射：{screen:MapG}，
登录：{屏幕：登录}，
配置文件：{screen:Profile}，
}, {
tabBarPosition:'底部'，
animationEnabled：没错，
选项卡选项：{
activeTintColor:“#1abc9c”，
},
});
类MainNavigation扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={cats:[]}；
}
componentDidMount（）{
this.onLoadCats（）.then（（cats）=>this.setState（{cats:cats}））；
}
render（）{
返回(
}
}
//现在你可以在你的屏幕上做
console.log（this.props.screenProps.cats）；
/*这是下一行错误，请检查上面的更新*/
/*log（this.props.navigation.state.params.cats）*/
解决的问题效果很好。请注意，未来乞丐访问道具时请使用“this.props.screenProps.cats”你能检查一下它的关系吗？只是为了强调这一点，在我犯了错误后。道具名称需要称为
screenProps
，这似乎是react导航的默认名称。