3-1 一个小demo展示
这部分代码在git@github.com:fx35792/react_native_study.git的createBottomTopNavigator分支上
因为需要用到图标所以我们要使用一个第三方库react-native-vector-ions
yarn add react-native-vector-icons
react-native link react-native-vector-icons
//navigators/AppNavigators.js
import React from 'react';
import {createStackNavigator, createBottomTabNavigator, createMaterialTopTabNavigator} from 'react-navigation';
import {Button, Platform} from 'react-native';
import Login from '../pages/Login';
import HomePage from '../pages/HomePage';
import Page1 from '../pages/Page1';
import Page2 from '../pages/Page2';
import Page3 from '../pages/Page3';
import Page4 from '../pages/Page4';
import Page5 from '../pages/Page5';
import Ionicons from 'react-native-vector-icons/Ionicons'
//设置头部导航
const AppMaterialTopTabNavigator = createMaterialTopTabNavigator({
Page1: {
screen: Page1,
navigationOptions: {
tabBarLabel: 'All'
}
},
Page2: {
screen: Page2,
navigationOptions: {
tabBarLabel: 'IOS'
}
},
Page3: {
screen: Page3,
navigationOptions: {
tabBarLabel: 'React'
}
},
Page4: {
screen: Page4,
navigationOptions: {
tabBarLabel: 'React Native'
}
},
Page5: {
screen: Page5,
navigationOptions: {
tabBarLabel: 'Android'
}
}
}, {
tabBarOptions: {
tabStyle: {
mindWidth: 50,
},
upperCaseLabel: false,//是否使标签大写，默认true
scrollEnabled: true,//是否支持选项卡滑动，默认false
style: {
backgroundColor: '#678' //tabBar 背景色
},
indicatorStyle: {
height: 2,
backgroundColor: 'white'
},//标签指示器的样式
labelStyle: {
fontSize: 13,
marginTop: 6,
marginBottom: 6
}//文字的样式
}
});
//设置底部导航
const AppBottomTabNavigator = createBottomTabNavigator({
Page1: {
screen: Page1,
navigationOptions: {
tabBarLabel: '最热',
tabBarIcon: ({titleColor, focused}) => (
<Ionicons
name={'ios-home'}
size={26}
style={{color: titleColor}}
/>
)
}
},
Page2: {
screen: Page2,
navigationOptions: {
tabBarLabel: '推荐',
tabBarIcon: ({titleColor, focused}) => (
<Ionicons
name={'ios-aperture'}
size={26}
style={{color: titleColor}}
/>
)
}
},
Page3: {
screen: Page3,
navigationOptions: {
tabBarLabel: '趋势',
tabBarIcon: ({titleColor, focused}) => (
<Ionicons
name={'ios-people'}
size={26}
style={{color: titleColor}}
/>
)
}
},
Page4: {
screen: Page4,
navigationOptions: {
tabBarLabel: '我',
tabBarIcon: ({titleColor, focused}) => (
<Ionicons
name={'ios-person'}
size={26}
style={{color: titleColor}}
/>
)
}
}
}, {
tabBarOptions: {
activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff'
}
});
export const AppStackNavigator = createStackNavigator({
HomePage: {
screen: HomePage
},
Page1: {
screen: Page1,
navigationOptions: ({navigation}) => ({
title: `${navigation.state.params.name}页面名`
})
},
Page2: {
screen: Page2,
navigationOptions: {
title: 'This is Page2'
}
},
Page3: {
screen: Page3,
navigationOptions: (props) => {
const {navigation} = props;
const {state, setParams} = navigation;
const {params} = state;
return {
title: params.title ? params.title : 'This is Page3',
headerRight: (
<Button
title={params.mode === 'edit' ? '保存' : '编辑'}
onPress={() =>
setParams({
mode: params.mode === 'edit' ? '' : 'edit'
})
}
/>
)
}
}
},
Page4: {
screen: Page4,
navigationOptions: {
title: 'This is Page4'
}
},
Page5: {
screen: Page5,
navigationOptions: {
title: 'This is Page5'
}
},
Login: {
screen: Login,
navigationOptions: {
title: 'This is Login'
}
},
Bottom: {
screen: AppBottomTabNavigator,
navigationOptions: {
title: 'This is Bottom'
}
},
Top: {
screen: AppMaterialTopTabNavigator,
navigationOptions: {
title: 'This is Top'
}
}
});
//pages/HomePage.js
import React, {Component} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
type Props = {};
export default class HomePage extends Component<Props> {
static navigationOptions = {
title: 'Home',
headerBackTitle: '返回哈哈'//设置返回此页面的返回按钮文案，长度有限制
};
render() {
const {navigation} = this.props;
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to HomePage!</Text>
<Button
title={'Go to Page1'}
onPress={() => {
navigation.navigate('Page1', {
name: '动态的'
})
}}
/>
<Button
title={'Go to Page2'}
onPress={() => {
navigation.navigate('Page2')
}}
/>
<Button
title={'Go to Page3'}
onPress={() => {
navigation.navigate('Page3', {
name: 'Dell'
})
}}
/>
<Button
title={'Go to Bottom'}
onPress={() => {
navigation.navigate('Bottom')
}}
/>
<Button
title={'Go to Top'}
onPress={() => {
navigation.navigate('Top')
}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
3-2 createMaterialTopTabNavigator相关的Api
createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig):
-
RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。 -
TabNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。
从createMaterialTopTabNavigator API上可以看出createMaterialTopTabNavigator支持通过RouteConfigs和 TabNavigatorConfig两个参数来创建createMaterialTopTabNavigator导航器。
RouteConfigs
RouteConfigs支持三个参数screen、path以及navigationOptions；
-
screen(必选)：指定一个 React 组件作为屏幕的主要显示内容，当这个组件被TabNavigator加载时，它会被分配一个navigationprop。 -
path(可选)：用来设置支持schema跳转时使用，具体使用会在下文的有关Schema章节中讲到； -
navigationOptions(可选)：用以配置全局的屏幕导航选项如：title、headerRight、headerLeft等；
TabNavigatorConfig
- tabBarComponent：指定TabNavigator的TabBar组件；
- tabBarPosition: 用于指定TabBar的显示位置，支持’top’ 与 ‘bottom’两种方式；
- swipeEnabled : 是否可以左右滑动切换tab；
- lazy - 默认值是 false。如果是true，Tab 页只会在被选中或滑动到该页时被渲染。当为 false 时，所有的 Tab 页都将直接被渲染；（可以轻松实现多Tab 页面的懒加载）；
- optimizationsEnabled -是否将 Tab 页嵌套在到 <resourcesavingscene style="box-sizing: border-box;"></resourcesavingscene>中。如果是，一旦该 Tab 页失去焦点，将被移出当前页面, 从而提高内存使用率。
- animationEnabled : 切换页面时是否有动画效果。
- initialLayout : 包含初始高度和宽度的可选对象可以被传递以防止react-native-tab-view呈现中的一个帧延迟；
- tabBarOptions: 配置TaBar下文会详细讲解；
- initialRouteName : 默认页面组件，TabNavigator显示的第一个页面；
- order: 定义tab顺序的routeNames数组。
- paths: 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
- backBehavior: 后退按钮是否会导致标签切换到初始tab？ 如果是，则设切换到初始tab，否则什么也不做。 默认为切换到初始tab。
tabBarOptions（tab配置）
- activeTintColor: 设置TabBar选中状态下的标签和图标的颜色；
- inactiveTintColor: 设置TabBar非选中状态下的标签和图标的颜色；
- showIcon: 是否展示图标，默认是false；
- showLabel: 是否展示标签，默认是true；
- upperCaseLabel - 是否使标签大写，默认为true。
- tabStyle: 设置单个tab的样式；
- indicatorStyle: 设置 indicator(tab下面的那条线)的样式；
- labelStyle: 设置TabBar标签的样式；
- iconStyle: 设置图标的样式；
- style: 设置整个TabBar的样式；
- allowFontScaling: 设置TabBar标签是否支持缩放，默认支持；
- pressColor -Color for material ripple（仅支持 Android >= 5.0；
- pressOpacity -按下标签时的不透明度（支持 iOS 和 Android < 5.0）；
- scrollEnabled -是否支持 选项卡滚动
navigationOptions（屏幕导航选项）
createMaterialTopTabNavigator支持的屏幕导航选项的参数有：
- title: 可以用作headerTitle和tabBarLabel的备选的通用标题。
- swipeEnabled：是否允许tab之间的滑动切换，默认允许；
- tabBarIcon: 设置TabBar的图标；
- tabBarLabel: 设置TabBar的标签；
- tabBarOnPress: Tab被点击的回调函数，它的参数是一保函一下变量的对象：
- navigation：页面的 navigation props
- defaultHandler: tab press 的默认 handler
- tabBarAccessibilityLabel：选项卡按钮的辅助功能标签。 当用户点击标签时，屏幕阅读器会读取这些信息。 如果您没有选项卡的标签，建议设置此项；
- tabBarTestID：用于在测试中找到该选项卡按钮的 ID；
3-3 createBottomTabNavigator相关的Api
createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):
-
RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。 -
BottomTabNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。
从createBottomTabNavigator API上可以看出createBottomTabNavigator支持通过RouteConfigs和 BottomTabNavigatorConfig两个参数来创建createBottomTabNavigator导航器。
RouteConfigs
RouteConfigs支持三个参数screen、path以及navigationOptions；
-
screen(必选)：指定一个 React 组件作为屏幕的主要显示内容，当这个组件被TabNavigator加载时，它会被分配一个navigationprop。 -
path(可选)：用来设置支持schema跳转时使用，具体使用会在下文的有关Schema章节中讲到； -
navigationOptions(可选)：用以配置全局的屏幕导航选项如：title、headerRight、headerLeft等；
BottomTabNavigatorConfig
- tabBarComponent：指定createBottomTabNavigator的TabBar组件，如果不指定在iOS上默认使用
TabBarBottom，在Android平台上默认使用TabBarTop。-
TabBarBottom与TabBarTop都是react-navigation所支持的组件，要自定义TabBar可以重写这两个组件也可以根据需要自己实现一个；
-
- tabBarOptions: 配置TaBar下文会详细讲解；
- initialRouteName : 默认页面组件，createBottomTabNavigator显示的第一个页面；
- order: 定义tab顺序的routeNames数组。
- paths: 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
- backBehavior: 后退按钮是否会导致标签切换到初始tab？ 如果是，则设切换到初始tab，否则什么也不做。 默认为切换到初始tab。
tabBarOptions（tab配置）
- activeTintColor: 设置TabBar选中状态下的标签和图标的颜色；
- inactiveTintColor: 设置TabBar非选中状态下的标签和图标的颜色；
- showIcon: 是否展示图标，默认是false；
- showLabel: 是否展示标签，默认是true；
- upperCaseLabel - 是否使标签大写，默认为true。
- tabStyle: 设置单个tab的样式；
- indicatorStyle: 设置 indicator(tab下面的那条线)的样式；
- labelStyle: 设置TabBar标签的样式；
- iconStyle: 设置图标的样式；
- style: 设置整个TabBar的样式；
- allowFontScaling: 设置TabBar标签是否支持缩放，默认支持；
- safeAreaInset：覆盖<safeareaview style="box-sizing: border-box;">的forceInset prop，默认是{ bottom: 'always', top: 'never' }，可选值：top | bottom | left | right ('always' | 'never')；</safeareaview>
navigationOptions（屏幕导航选项）
createBottomTabNavigator支持的屏幕导航选项的参数有：
- title: 可以用作headerTitle和tabBarLabel的备选的通用标题。
- tabBarVisible: 显示或隐藏TabBar，默认显示；
- tabBarIcon: 设置TabBar的图标；
- tabBarLabel: 设置TabBar的标签；
- tabBarOnPress: Tab被点击的回调函数，它的参数是一保函一下变量的对象：
- navigation: navigation prop ；
- defaultHandler: tab按下的默认处理程序；
- tabBarButtonComponent：React组件，它包装图标和标签并实现onPress。 默认情况下是TouchableWithoutFeedback的一个封装，使其其表现与其它可点击组件相同，tabBarButtonComponent: TouchableOpacity 将使用 TouchableOpacity 来替代；
- tabBarAccessibilityLabel：选项卡按钮的辅助功能标签。 当用户点击标签时，屏幕阅读器会读取这些信息。 如果您没有选项卡的标签，建议设置此项；
- tabBarTestID：用于在测试中找到该选项卡按钮的 ID；
