Question

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

Answer 1

您可以将自定义标头值作为道具传递给组件然后在您想要自定义标题的组件的顶部放置这样的内容：

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值，以提供＆＃34;默认值＆＃34;不动态添加/重写它们的组件的值。

TabNavigator将每个屏幕的不同参数传递给StackNavigator标头

1 个答案: