Изменение активной вкладки в TabBarNavigator, когда пользователь нажимает кнопку в представлении

Question

Просто наполовину, я UX-дизайнер, изучающий React Native для создания прототипа.

Я пытаюсь выяснить, как изменить активную вкладку, когда пользователь нажимает кнопку в представлении на другой вкладке.

Например, если вы находитесь на домашнем виде и есть кнопка, по которой пользователь нажимает, чтобы перевести его в представление настроек, я бы хотел, чтобы вкладка настроек отображалась как активная нижняя вкладка при отображении представления.

В настоящее время я могу заставить приложение перейти к новому представлению, но оно все равно будет отображать вкладку «Главная» в качестве активной вкладки. Кроме того, в заголовке не должно быть кнопки «Назад» при переходе к одному из экранов, доступ к которому осуществляется через нижнюю вкладку. Я просмотрел документацию по React Navigation 3.x, но не смог найти ничего, что могло бы помочь в этом случае.

Вот код, который я сейчас использую.

<TouchableOpacity
        onPress={() => {
          this.props.navigation.push("Settings");
        }}
      >{...} 
</TouchableOpacity>

Answer 1

Ну, во-первых, вам нужно решить, хотите ли вы вкладки в нижней или верхней части вашего Android-приложения.Я выбрал нижнюю часть, и у меня есть только значки, без текста (я сделал это, потому что значки с текстом в React Navigation на Android ужасно переполнены, но на iPhone выглядят нормально).Вот пример кода для вас:

 import React from 'react';
import { TabNavigator } from 'react-navigation';
import { MaterialIcons, Ionicons } from '@expo/vector-icons';
import { Platform } from 'react-native';

// Import Screens
import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';

export const Tabs = TabNavigator({
  Screen1: {
    screen: Screen1,
    navigationOptions: {
      tabBarLabel: 'Screen1',
      tabBarIcon: ({ tintColor }) => <MaterialIcons name='account-circle' size={26} style={{ color: tintColor }} />
    },
  },
  Screen2: {
    screen: Screen2,
    navigationOptions: {
      tabBarLabel: 'Screen2',
      tabBarIcon: ({ tintColor }) => <Ionicons name='ios-time' size={26} style={{ color: tintColor }} />
    },
  },
}, {
    headerMode: 'none',        // I don't want a NavBar at top
    tabBarPosition: 'bottom',  // So your Android tabs go bottom
    tabBarOptions: {
      activeTintColor: 'red',  // Color of tab when pressed
      inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
      showIcon: 'true', // Shows an icon for both iOS and Android
      showLabel: (Platform.OS !== 'android'), //No label for Android
      labelStyle: {
        fontSize: 11,
      },
      style: {
        backgroundColor: '#fff', // Makes Android tab bar white instead of standard blue
        height: (Platform.OS === 'ios') ? 48 : 50 // I didn't use this in my app, so the numbers may be off. 
      }
    },
});

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

https://reactnavigation.org/docs/en/tab-navigator.html

https://reactnavigation.org/docs/en/bottom-tab-navigator.html

Answer 2

При создании навигатора нижней вкладки убедитесь, что у вас есть экран настроек как часть этой вкладки.

Кроме того, вместо push рассмотрим navigate, так как это то, что документы рекомендуют делать сейчас, начиная с v3 и новее.

Ссылка: https://reactnavigation.org/docs/en/tab-based-navigation.html

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});