在TabNavigator中反应导航通行证道具 [英] React Navigation pass props in TabNavigator

问题描述

在初始屏幕上，我有从服务器加载的道具.我想将它们传递给其余选项卡屏幕.但是，我没有在网上找到任何示例.我知道screenProps，但不知道如何设置.我尝试过的所有方法都导致错误.

I have props what are loaded from the server on the initial screen. I want to pass them to the rest of the tab screens. However, I have not found any examples online. I know of the screenProps, but have no idea how to set it up. All methods I have tried, have resulted in errors.

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

这是我的屏幕设置.我应该将screenProps放在哪里?

This is my screen setup. Where should I place the screenProps?

<EProj
  screenProps={cats}
/>

任何良好的示例如何进行设置都将有所帮助.预先感谢.

Any good examples how to set this up would be helpful. Thanks in advance.

主屏幕设置:

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>
    );
  }
}

推荐答案

您可以做的是创建一个可以返回导航的高阶组件，在该组件的componentDidMount中，您可以加载数据并将其传递screenProps.

What you can do is create a higher order component that can return the navigation, and in that component's componentDidMount, you can load the data and pass it through screenProps.

示例

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); */

这篇关于在TabNavigator中反应导航通行证道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！