Javascript TabNavigator将不同的参数从每个屏幕传递到StackNavigator标题

我有个问题。如何将特定参数从每个屏幕传递到StackNavigator标题，以便在到达屏幕时显示不同类型的组件

我已经做了一些关于这类问题的研究，但是没有多少信息可以帮助我。所以我在这里贴了一些帮助，希望有人能指导我。非常感谢

const mainNav = TabNavigator({
  Home: { 
    screen: HomeScreen,
    param:{
      tabval:1
    }
  },
  Live: {
   screen: LiveScreen,
   param:{
      tabval:2
    }
  },
  Radio: {
   screen: RadioScreen,
   param:{
      tabval:3
    }
  },
} );

function DifferentComponents(tabval){
  if(tabval == 1){
    //do something
  }else if(tabval == 2){
    //do something
  }else{
    //do something
  }
}

export const mainStack = StackNavigator({
  Home: { 
    screen: mainNav,
    navigationOptions: {
      header: (
        <View style={styles.topnavscrollview}>
          <View style={{width:300}}>
            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
              {this.DifferentComponents(tabval)} <-- Change this when switch to Live tab or others
            </ScrollView>
          </View>
        </View>
      ),
    },
  },
  Content: { screen: ContentScreen },
});

const mainNav=TabNavigator({
主页：{
屏幕：主屏幕，
参数：{
表1
}
},
现场：{
屏幕：直播屏幕，
参数：{
塔瓦尔：2
}
},
电台：{
屏幕：收音机屏幕，
参数：{
塔瓦尔：3
}
},
} );
函数差异组件（tabval）{
如果（tabval==1）{
//做点什么
}else if（tabval==2）{
//做点什么
}否则{
//做点什么
}
}
导出常量mainStack=StackNavigator({
主页：{
屏幕：主导航，
导航选项：{
标题：(
{this.DifferentComponents（tabval）}您可以将自定义头值作为道具传递给组件。

然后在要自定义标题的组件顶部放置类似的内容：

class Home extends React.Component {    

  // dynamically set header title when component mounts
  static navigationOptions = (props) => {
    const title = props.myTitleForThisComponent;
    return { title }
  }

  render(){
  // render stuff..
  }
}

当您通过StackNavigator链接导航到组件时，传递到组件中的任何道具都将作为
this.props.navigation.state.params
提供

例如，如果您通过StackNavigator导航到组件，如下所示：

this.props.navigation.navigate(
    'Home',
     /* below passes into the "Home" component as: this.props.navigation.state.params.title */
     { myCustomTitle: "hello there" }
)}

然后，您可以为
主页
页面组件创建自定义标题，如下所示：

  static navigationOptions = ({ navigation }) => {
    const { myCustomTitle } = navigation.state.params;
    return { title: `${myCustomTitle} !!`}
  }

你好

注意：当您定义
StackNavigator
时，您不需要包含选项
navigationOptions.title
，因为您可以在组件装载时动态添加它。

但是，您可以在StackNavigator定义中提供通用的
导航选项
值，为不动态添加/重新写入的组件提供“默认”值。
您可以将自定义标题值作为道具传递给组件。

然后在要自定义标题的组件顶部放置类似的内容：

class Home extends React.Component {    

  // dynamically set header title when component mounts
  static navigationOptions = (props) => {
    const title = props.myTitleForThisComponent;
    return { title }
  }

  render(){
  // render stuff..
  }
}

当您通过StackNavigator链接导航到组件时，传递到组件中的任何道具都将作为
this.props.navigation.state.params
提供

例如，如果您通过StackNavigator导航到组件，如下所示：

this.props.navigation.navigate(
    'Home',
     /* below passes into the "Home" component as: this.props.navigation.state.params.title */
     { myCustomTitle: "hello there" }
)}

然后，您可以为
主页
页面组件创建自定义标题，如下所示：

  static navigationOptions = ({ navigation }) => {
    const { myCustomTitle } = navigation.state.params;
    return { title: `${myCustomTitle} !!`}
  }

你好

注意：当您定义
StackNavigator
时，您不需要包含选项
navigationOptions.title
，因为您可以在组件装载时动态添加它。

但是，您可以在StackNavigator定义中提供通用的
navigationOptions
值，为不动态添加/重新写入的组件提供“默认”值