TabNavigator 将不同参数从每个屏幕传递到 StackNavigator 标头 [英] TabNavigator pass different param from each screen to StackNavigator header

问题描述

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

我对这类问题做了一些研究，但没有太多信息可以帮助我.所以我在这里发帖寻求帮助，希望有人可以指导我.非常感谢.

const mainNav = TabNavigator({家: {屏幕:主屏幕，参数:{标签:1}},居住: {屏幕:实时屏幕，参数:{标签:2}},收音机: {屏幕:RadioScreen，参数:{标签:3}},});功能不同的组件(tabval){如果(tabval == 1){//做一点事}else if(tabval == 2){//做一点事}别的{//做一点事}}export const mainStack = StackNavigator({家: {屏幕:主导航，导航选项:{标题:(<视图样式={styles.topnavscrollview}><视图样式={{width:300}}><ScrollView horizo​​ntal={true} showsHorizo​​ntalScrollIndicator={false}>{this.DifferentComponents(tabval)} <-- 在切换到实时选项卡或其他选项卡时更改此设置</滚动视图></查看></查看>),},},内容:{屏幕:ContentScreen}，});

解决方案

您可以将自定义标头值作为 prop 传递给组件.
然后在要为其自定义标题的组件的顶部放置类似的内容:

class Home 扩展 React.Component {//组件挂载时动态设置标题标题静态导航选项 = (道具) =>{const title = props.myTitleForThisComponent;返回{标题}}使成为(){//渲染东西..}}

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

例如，如果您像这样通过 StackNavigator 导航到您的组件:

this.props.navigation.navigate('家'，/* 下面传入Home"组件:this.props.navigation.state.params.title */{ myCustomTitle:你好"})}

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

 static navigationOptions = ({ navigation }) =>{const { myCustomTitle } = navigation.state.params;返回 { 标题:`${myCustomTitle} !!`}}

<块引用>

你好！！

注意:当你定义你的StackNavigator时，你不需要包含选项navigationOptions.title，因为您是在组件安装时动态添加它.
但是，您可以在 StackNavigator 定义中提供通用的 navigationOptions 值，以便为不动态添加/重写它们的组件提供默认"值.

I have Question. How can I pass specific param from each screen to the StackNavigator header in order to come out different kind of components when reached the screen.

I have done some research about this kind of question, but there are not much info that can help me. So I posted here to find some help, hope there are someone who can guide me. Thanks a lot.

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

解决方案

You can pass in the custom header value as a prop to the component.
Then put something like this at the top the component that you want to customize the header for:

class Home extends React.Component {    

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

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

When you navigate to the component via a StackNavigator link, any props that you pass into the component will be available as this.props.navigation.state.params.

For example, if you navigate to your component via StackNavigator like this:

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

Then you can create a custom title for the Home page component like this:

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

hello there !!

Note: when you define your StackNavigator, you do not need to include the option navigationOptions.title, since you are add it dynamically when the component mounts.
However, you can provide generic navigationOptions values within the StackNavigator definition, to provide a "default" values for components that do not add/re-write them dynamically.

这篇关于TabNavigator 将不同参数从每个屏幕传递到 StackNavigator 标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！