createBottomTabNavigatorЭквивалент TabBarController в iOS, панель вкладок в нижней части экрана. Как показано на рисунке:
createBottomTabNavigator API
createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):
-
RouteConfigs(Обязательно): Объект конфигурации маршрута — это сопоставление имени маршрута с конфигурацией маршрута, которое сообщает навигатору, что отображать для этого маршрута. -
BottomTabNavigatorConfig(Необязательно): Настройте стиль маршрутизации навигатора (например, первый экран по умолчанию, параметры навигации, пути и т. д.) (например, режим перехода, режим заголовка и т. д.).
Как видно из API createBottomTabNavigatorcreateBottomTabNavigatorподдержка черезRouteConfigsа такжеBottomTabNavigatorConfigДва параметра для создания навигатора createBottomTabNavigator.
RouteConfigs
RouteConfigs поддерживает три параметраscreen,pathтак же какnavigationOptions;
-
screen(Обязательно): Укажите компонент React в качестве основного отображаемого содержимого экрана.Когда этот компонент загружается TabNavigator, ему будет назначенnavigationопора -
path(Необязательно): Используется для установки поддержки перехода по схеме. Конкретное использование будет описано ниже.Schemaупоминается в главе; -
navigationOptions(Необязательно): экран для настройки глобальных навигационных вариантов, таких как: заголовок, лауреата, заголовка, то есть;
BottomTabNavigatorConfig
- tabBarComponent: укажите компонент TabBar для createBottomTabNavigator, если он не указан, он будет использоваться по умолчанию в iOS.
TabBarBottom, который используется по умолчанию на платформе AndroidTabBarTop.-
TabBarBottomа такжеTabBarTopобеreact-navigationПоддерживаемые компоненты, чтобы настроить TabBar, вы можете переписать эти два компонента или реализовать один самостоятельно по мере необходимости;
-
- tabBarOptions: Настройка TaBar будет подробно описана ниже;
- initialRouteName : компонент страницы по умолчанию, первая страница, отображаемая createBottomTabNavigator;
- order: массив routeNames, определяющий порядок табуляции.
- paths: предоставляет сопоставление routeName с конфигурацией пути, которая переопределяет пути, заданные в routeConfigs.
- backBehavior: кнопка «Назад» заставляет вкладку переключаться на начальную вкладку? Если это так, переключитесь на начальную вкладку, иначе ничего не делайте. По умолчанию нужно переключиться на начальную вкладку.
tabBarOptions (конфигурация вкладок)
- activeTintColor: установите цвет метки и значка в выбранном состоянии TabBar;
- inactiveTintColor: установите цвет метки и значка, когда TabBar не выбран;
- showIcon: показывать ли значок, значение по умолчанию — false;
- showLabel: отображать ли метку, по умолчанию true;
- upperCaseLabel — использовать ли метку в верхнем регистре, по умолчанию — true.
- tabStyle: установите стиль отдельной вкладки;
- индикаторStyle: Установить стиль индикатора (строка под вкладкой);
- labelStyle: установите стиль метки TabBar;
- iconStyle: установите стиль значка;
- стиль: установить стиль всего TabBar;
- allowFontScaling: установите, поддерживает ли метка TabBar масштабирование, поддержка по умолчанию;
- safeAreaInset: переопределить свойство forceInset, по умолчанию {нижний: 'всегда', верхний: 'никогда'}, необязательное значение: верхний | нижний | левый | правый ("всегда" | 'никогда');
eg:
tabBarOptions: {
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 100,
},
style: {
backgroundColor: 'blue',
},
}
navigationOptions (параметры навигации по экрану)
Параметры экранной навигации, поддерживаемые createBottomTabNavigator:
- title: общий заголовок, который можно использовать в качестве альтернативы headerTitle и tabBarLabel.
- tabBarVisible: показать или скрыть панель вкладок, отображаемую по умолчанию;
- tabBarIcon: Установите значок TabBar;
- tabBarLabel: Установите метку TabBar;
- tabBarOnPress: функция обратного вызова при нажатии на вкладку, а ее параметр — это объект, который гарантирует следующие переменные:
- навигация: навигационная опора;
- defaultHandler: обработчик по умолчанию для нажатия табуляции;
- tabBarButtonComponent: компонент React, который упаковывает значки и метки и реализует onPress. По умолчанию это оболочка TouchableWithoutFeedback, что делает его поведение таким же, как и другие интерактивные компоненты, tabBarButtonComponent: TouchableOpacity вместо этого будет использовать TouchableOpacity;
- tabBarAccessibilityLabel: метка доступности для кнопки вкладки. Программы чтения с экрана читают эту информацию, когда пользователь щелкает метку. Рекомендуется установить это, если у вас нет метки вкладки;
- tabBarTestID: идентификатор, используемый для поиска кнопки вкладки в тесте;
[Случай 1] Используйте createBottomTabNavigator для навигации по интерфейсу и настройте navigationOptions
Шаг 1. Создайте навигатор типа createBottomTabNavigator.
export const AppTabNavigator = createBottomTabNavigator({
Page1: {
screen: Page1,
navigationOptions: {
tabBarLabel: 'Page1',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={focused ? 'ios-home' : 'ios-home-outline'}
size={26}
style={{color: tintColor}}
/>
),
}
},
Page2: {
screen: Page2,
navigationOptions: {
tabBarLabel: 'Page2',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={focused ? 'ios-people' : 'ios-people-outline'}
size={26}
style={{color: tintColor}}
/>
),
}
},
Page3: {
screen: Page3,
navigationOptions: {
tabBarLabel: 'Page3',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
size={26}
style={{color: tintColor}}
/>
),
}
},
}, {
tabBarComponent: TabBarComponent,
tabBarOptions: {
activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
}
});
Шаг 2: Настройте параметры навигации:
NavigationOptions TabNavigator имеет два ключевых свойства: метку tabBarLabel и значок tabBarIcon:
Page2: {
screen: Page2,
navigationOptions: {
tabBarLabel: 'Page2',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={focused ? 'ios-people' : 'ios-people-outline'}
size={26}
style={{color: tintColor}}
/>
),
}
},
используется в приведенном выше кодеreact-native-vector-iconsВекторный значок вкладки используется в качестве отображаемого значка вкладки, tabBarIcon получает компонент React, и вы можете настроить его в соответствии со своими потребностями:
- tintColor: цвет вкладки в текущем состоянии;
- Сфокусировали: выбрана ли вкладка;
Третий шаг: переход интерфейса
const {navigation} = this.props;
...
<Button
title="跳转到页面2"
onPress={() => {
navigation.navigate("Page3",{ name: 'Devio' })
}}
/>
<Button
title="Go Back"
onPress={() => {
navigation.goBack();
}}
/>
Анализ кода:
Переход по страницам можно разделить на два этапа:
-
- Получить навигацию:
const {navigation} = this.props; -
- пройти через
navigate(routeName, params, action)Перейти на страницу:
navigation.navigate('Page2'); navigation.navigate('Page3',{ name: 'Devio' });прыгать сюда
Page3при передаче параметров{ name: 'Devio' }; - пройти через
Шаг 4: Обновите параметры страницы и вернитесь
export default class Page1 extends React.Component {
//也可在这里定义每个页面的导航属性，这里的定义会覆盖掉别处的定义
// static navigationOptions = {
// title: 'Page1',
// };
render() {
const {navigation} = this.props;
return <View style={{flex: 1, backgroundColor: "gray",}}>
<Text style={styles.text}>欢迎来到Page1</Text>
<Button
title="Go Back"
onPress={() => {
navigation.goBack();
}}
/>
<Button
title="改变主题色"
onPress={() => {
navigation.setParams({theme:{
tintColor:'orange',
updateTime:new Date().getTime()
}})
}}
/>
<Button
title="跳转到页面2"
onPress={() => {
navigation.navigate("Page2")
}}
/>
</View>
}
}
Анализ кода:
Передайте приведенный выше код:
<Button
title="改变主题色"
onPress={() => {
navigation.setParams({theme:{
tintColor:'orange',
updateTime:new Date().getTime()
}})
}}
/>
Обновите текущую тему, и вы увидите, что при нажатии кнопки «Изменить цвет темы» цвет панели вкладок также изменится.
когда пользователь нажимаетGo Backкнопка через:
navigation.goBack();
Реализован возврат к вкладке по умолчанию.
[Расширенный случай] Расширенное применение реактивной навигации
При использовании реактивной навигации часто возникают некоторые требования, которые невозможно выполнить с помощью простой настройки, например:
- Динамическая конфигурация createBottomTabNavigator: Официальная предоставляет только статическую конфигурацию страниц в TabNavigator.Если страницы в TabNavigator не фиксированы и их нужно генерировать динамически, что делать?
- Динамическая настройка стиля createBottomTabNavigator: Невозможно динамически изменить стиль TabNavigator через официальные документы, например: изменение отображаемого текста, изменение цвета шрифта, изменение значка и т. д.;
- Индивидуальная маршрутизация после многоуровневого вложения: страница в TabNavigator после создания оболочки createBottomTabNavigator не может использовать навигацию для перехода на страницу во внешнем StackNavigator.Существует множество сценариев применения, особенно когда вам нужно настроить TabNavigator;
- Инициализировать параметры: как передать параметры при настройке страницы?
Существует множество сценариев применения, подобных описанному выше.Последняя версия React Native + Redux для создания высококачественного онлайн-учебника по приложению.для дальнейшего изученияБолее продвинутые приложения реактивной навигации.
- Если вы столкнетесь с какими-либо проблемами в процессе обучения использованию React Navigation3x, вы можетеВидеоурок по React Navigation3xИщем ответ в Ха.
- Кроме того, также возможно пройтиПоследняя версия React Native + Redux для создания высококачественного онлайн-учебника по приложению.Узнайте больше о практическом опыте и навыках разработки React Navigation3x, а также об идеях оптимизации.