reactjs – StackNavigator中嵌套的TabNavigator：控制标题

我的设置很像这样：

let Tabs = createBottomTabNavigator({
    screen1: Screen1,screen2: Screen2
})

let Stack = createStackNavigator({
    tabs: Tabs
    otherScreen: OtherScreen
})

堆栈导航器有一个标题,没关系.我想要的是获取不同的标题图标取决于我目前在哪个标签上.

我使用以下版本：

"react": "16.3.1","react-native": "~0.55.2","react-navigation": "^2.2.5"

我已经考虑过切换我的设置,以便每个标签屏幕都有自己的StackNavigator,但我喜欢在切换标签时有滑动动画,我不希望标题图标滑动.标题栏应保持静态,但根据当前标签显示不同的图标.

您可以使用如下所示,https://reactnavigation.org/docs/en/stack-navigator.html

//Screen1 Stack.

const Screen1 = createStackNavigator ({
    Home: {
        screen: Home,navigationOptions: {
            header: null //Need to set header as null.
        }
    }
});

//Screen2 Stack

const Screen2 = createStackNavigator ({
    Profile: {
        screen: Profile,navigationOptions: {
            header: null  //Need to set header as null.
        }
    }
});


let Tabs = createMaterialTopTabNavigator({
    Screen1:{
      screen: Screen1 //Calling Screen1 Stack.
    },Screen2:{
      screen: Screen2 //Calling Screen2 Stack.
    }
},{ tabBarPosition: 'bottom' }) //this will set the TabBar at Bottom of your screen.

let Stack = createStackNavigator({
    tabs:{
      screen: Tabs,//You can add the NavigationOption here with navigation as parameter using destructuring.
      navigationOptions: ({navigation})=>{
       //title: (navigation.state.routes[navigation.state.index])["routeName"]  
       //this will fetch the routeName of Tabs in TabNavigation. If you set the routename of the TabNavigation as your Header. 

       //use the following title property,this will fetch the current stack's routeName which will be set as your header in the TabBar.

        //title: (navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName

       //you can use switch case,on matching the route name you can set title of the header that you want and also header left and right icons similarly.

        switch ((navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName) {
            case "Screen1":
                return {
                    title: "Home",headerLeft: (<Button
                        onPress={()=> alert("hi")}
                        title="Back"
                        color="#841584"
                        accessibilityLabel="Learn more about this purple button"
                    /> ),headerRight: <Button title= "Right"/>
                }
            case "Screen2":
                return { 
                    title: "Profile",headerRight: <Button title= "Right"/>
                }
            default:
                return { title: (navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName }
        }
      }
    },otherScreen:{
      screen: OtherScreen
    }
})

// navigationOptions

navigationOptions: ({navigation})=>{
   //title: (navigation.state.routes[navigation.state.index])["routeName"]  
   //this will fetch the routeName of Tabs in TabNavigation. If you set the routename of the TabNavigation as your Header. 

   //use the following title property,this will fetch the current stack's routeName which will be set as your header in the TabBar.

    //title: (navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName

    switch ((navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName) {
        case "Screen1":
            return {
                title: "Home",headerLeft: (<Button
                    onPress={()=> alert("hi")} //Here you can able to set the back behavIoUr.
                    title="Back"
                    color="#841584"
                    accessibilityLabel="Learn more about this purple button"
                /> ),headerRight: <Button title= "Right"/>
            }
        case "Screen2":
            return { 
                title: "Profile",headerLeft: (<Button
                    onPress={()=> alert("hi")} 
                    title="Back"
                    color="#841584"
                    accessibilityLabel="Learn more about this purple button"
                /> ),headerRight: <Button title= "Right"/>
            }
        default:
            return { title: (navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName }
    }
  }

//alert(navigation.state)

{

    "routes":[
        {
            "key":"Screen1","routeName":"Screen1","routes":[
                {
                    "key":"Home","routeName":"Home",}
            ],"index":0,"isTransitioning":false,"key":"id-1530276062643-0"
        },{
            "key":"Screen2","routeName":"Screen2","routes":[
                {
                    "key":"Profile","routeName":"Profile","key":"id-1530276062643-0"
        }
    ],"routeName":"tabs","key":"id-1530276062643-0"

}

//(navigation.state.routes[navigation.state.index])[\”routeName“]
//(navigation.state.routes[navigation.state.index][\”routes\”])[(navigation.state.routes[navigation.state.index][\”index\”])].routeName

this will give the current route name of the tab inside StackNavigation.

上面的代码将在根堆栈标题中设置标题,其中TabBar作为第一个路由驻留,因此我们将标题设置为null,用于TabBar中的单个堆栈.通过使用这种方式将在TabBar中切换屏幕时提供动画,因为标题将保持静态.

你可以在这里找到工作副本https://www.dropbox.com/s/jca6ssn9zkzh9kn/Archive.zip?dl=0

下载此文件并执行以下操作.

npm install //to get dependencies

react-native upgrade //to get android and ios folder

react-native link //to link dependencies and libraries

react-native run-ios (or) react-native run-android

你可以使用上面的,如果有的话,让我知道.

原文链接：https://www.f2er.com/react/300685.html

reactjs – StackNavigator中嵌套的TabNavigator：控制标题

猜你在找的React相关文章