javascript - TabNavigator从每个屏幕向StackNavigator header 传递不同的参数

我有问题。我如何将每个屏幕上的特定参数传递给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 },
});

最佳答案

您可以将自定义标头值作为对组件的支持。
然后在您要自定义标头的组件的顶部放置以下内容：

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

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

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

  你好 ！！


注意：定义StackNavigator时，无需包括选项navigationOptions.title，因为在组件安装时会动态添加该选项。
但是，您可以在StackNavigator定义中提供通用的navigationOptions值，以为不动态添加/重写它们的组件提供“默认”值。

关于javascript - TabNavigator从每个屏幕向StackNavigator header 传递不同的参数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46638454/