Вложенный TabNavigator внутри StackNavigator: управление заголовком

Question

У меня есть настройки, подобные этой:

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, но мне нравится скользящая анимация при переключении вкладок, и я не хочу, чтобы значки заголовков скользили вдоль.Строка заголовка должна оставаться статичной, но просто отображать различные значки в зависимости от текущей вкладки.

Answer 1

Если вы используете реагирующую навигацию <2, т. Е. ~ 1,5. * Вы можете установить это такне будет работать на последней реакции-навигации.Похоже, теперь для резервного копирования используется ключ титровального объекта. </p>

Это может быть полезно некоторым пользователям.Если вы хотите, вы можете попробовать понизить также.

У меня есть обновленная навигация React для моего проекта. Думаю, этот способ кому-то пригодится

const Tabs = TabNavigator({
     Tab1:{
        screen: Tab1,
        navigationOptions: ({navigation}) => {
           return { tabBarLabel:"Tab 1 "}
        }},
     Tab2:{
        screen: Tab2
        navigationOptions: ({navigation}) => {
           return { tabBarLabel:"Tab 2 "}
        }}
});
Tabs.navigationOptions = ({navigation})=>{
    const { routeName } = navigation.state.routes[navigation.state.index]; //This gives current route
    switch(routeName){
         case "Tab1":
           headerTitle="Tab 1";
           break;
         case "Tab1":
           headerTitle="Tab 1";
           break;
    }

 return {
   headerTitle: headerTitle
}
}

Answer 2

const RootStack = createStackNavigator(
  {
    Home: {screen: HomeScreen},
    FilterScreen: createMaterialTopTabNavigator({
        Tab1: {screen:Tab1Screen},
        Tab2: {screen: Tab2Screen},
    }),
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);


render() {
    return <RootStack/>;
}

Answer 3

Вы можете использовать как это ниже, 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",
                    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 }
        }
      }
    },
    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 }
    }
  }    

// предупреждение (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",
                }
            ],
            "index":0,
            "isTransitioning":false,
            "key":"id-1530276062643-0"
        }
    ],
    "index":0,
    "isTransitioning":false,
    "routeName":"tabs",
    "key":"id-1530276062643-0"

}

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

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

Приведенный выше код устанавливает заголовок в заголовке корневого стека, в котором TabBar находится в качестве первого маршрута, поэтому мы устанавливаем заголовок как нулевой для отдельного стека в TabBar. Использование этого способа обеспечит анимацию при переключении экранов в TabBar, поскольку заголовок будет оставаться статическим.

Вы можете найти рабочую копию здесь https://www.dropbox.com/s/jca6ssn9zkzh9kn/Archive.zip?dl=0

Загрузите это и выполните следующее.

1. npm install // для получения зависимостей

2. ответное обновление // для получения папки android и ios

3. ответная ссылка // для связи зависимостей и библиотек

4. реакция-нативный run-ios (или) реакция-нативный run-android

   Вы можете использовать выше, Дайте мне знать, если таковые имеются.

Answer 4

В AppNavigation.js // или где вы определили свои маршруты.

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

let Stack = createStackNavigator({
    tabs: Tabs
    otherScreen: OtherScreen
},{
    headerMode:"float", //Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.
    headerTransitionPreset:"fade-in-place" //this will give a slight transition when header icon change.
  }
)

In Screen1.js

class Screen1 extends Component {
 
 static navigationOptions = ({ navigation }) => {

    return {
      ...
      headerLeft: <HeaderLeftImage navigation={navigation} image={"Image_For_Screen1"}/>,
      ...
    }
  }
  ...
}

ПРИМЕЧАНИЕ: Вы можете добавить title, headersStyle, headerRight таким же образом, прочитайте эту ссылку конфигурация заголовка для получения более подробной информации

в Screen2.js сделать аналогично Screen1

class Screen2 extends Component {
 
 static navigationOptions = ({ navigation }) => {

    return {
      ...
      headerLeft: <HeaderLeftImage navigation={navigation} image={"Image_For_Screen2"}/>,
      ...
    }
  }
  ...
}

Header.js

export const HeaderLeftImage = (props) => (
    <View style={{
       'add styles'
    }}>
        <TouchableOpacity onPress={() => {"Add action here" }}>
            <Image source={props.image} resizeMethod='resize' style={{ height: 30, width: 90, resizeMode: 'contain' }} />
        </TouchableOpacity>
    </View>
)

Надеюсь, это поможет, если у вас есть какие-либо сомнения относительно кода, не стесняйтесь спрашивать.

Answer 5

Вы можете добиться желаемого поведения с вашей текущей конфигурацией стека навигации.Возможно, вам придется изменить несколько вещей и объединить несколько свойств, но это довольно просто, когда вы обдумываете это.

Я попытаюсь объяснить это небольшим примером.

Рассмотрим вариантниже навигаторы;

const Tabs = createBottomTabNavigator({
    screen1: Tab1,
    screen2: Tab2
})

const Stack = createStackNavigator({
    tabs: {
      screen: TabsPage,
      navigationOptions: ({navigation}) => {
        return { title: (navigation.state.params && navigation.state.params.title ? navigation.state.params.title : 'No Title' ) }
      }
    },
    otherScreen: Page
})

Как вы можете видеть, я устанавливаю параметр title из состояния навигации.Чтобы установить параметры для этого навигатора, мы собираемся получить справку из свойства screenProps;

class TabsPage extends Component {
  onTabsChange = (title) => {
    this.props.navigation.setParams({ title })
  }
  render() {
    return(<Tabs screenProps={{ onTabsChange: this.onTabsChange }} />)
  }
}

Я создал компонент-обертку для навигатора вкладок и передалфункция, которая устанавливает параметр title.

В последней части мы должны знать, как и когда использовать эту функцию, которую мы передали.Для этого мы будем использовать addListener опору навигации

class Tab1 extends React.Component {
  setTitle = () => {
    this.props.screenProps.onTabsChange('Title from Tab 1')
  }
  componentDidMount() {
    this.props.navigation.addListener('willFocus', this.setTitle)
  }
  render() {
    return <View><Text>{'Tab1'}</Text></View>
  }
}

Когда наша вкладка сфокусирована, будет запущена переданная функция, а затем задайте заголовок для этой вкладки.Вы можете использовать этот процесс для установки различных кнопок или значков для заголовка.Вы можете найти рабочую закуску здесь .