Open chenbin92 opened 8 years ago
先来看看实现的效果图,可以看到底部是常见的一种tab切换效果,有选中效果,自定义的图标(非系统默认提供的图标),可切换不同的视图.
react-native-vector-icons
3000 Customizable Icons for React Native with support for NavBar/TabBar, image source and full stying.
$ npm install react-native-vector-icons --save $ rnpm link
在项目根目录下面里执行上面的命令,即可完成 react-native-vector-icons 的安装。
var React = require('react-native'); var { View, Text, TabBarIOS, } = React; var Icon = require('react-native-vector-icons/Ionicons'); var TabBarView = React.createClass({ render: function() { return ( <TabBarIOS> <Icon.TabBarItem title="Home" iconName="ios-home-outline" selectedIconName="ios-home" > <View style={styles.tabContent}><Text>Home Tab</Text></View> </Icon.TabBarItem> </TabBarIOS> ); } };
这是 react-native-vector-icons 的一个 TabBar 示例代码,我们可以很简单的实现一个单独的 TabBar 效果,主要使用了 TabBarIOS 组件 和 react-native-vector-icons 提供的 Icon.TabBarItem 来完成一个图标和文字组合的 tab 效果。注意在 TabBar 使用图标时需要使用组件默认提供的 Icon.TabBarItem 代替 react-native 提供的 TabBarIOS.Item,否是会不生效。
TabBarIOS
Icon.TabBarItem
TabBarIOS.Item
barTintColor
tintColor
translucent
Icon.TabBarItem 是react-native-vector-icons提供的组件,包含三个属性
iconName
selectedIconName
iconSize
在步骤二中,已经完成了一个底部 TabBarItem 的效果,那接下来继续完成其他三个,并且保证每个 TabBarItem 的内容是相对应的; 这个时候就该 NavigatorIOS 组件出场了,我们修改上面的代码为:
var TabBarView = React.createClass({ render: function() { return ( <TabBarIOS> <Icon.TabBarItem title="Home" iconName="ios-home-outline" selectedIconName="ios-home" > // 注意这里的改变与步骤二对比 <NavigatorIOS barTintColor='#5F97F6' titleTextColor='#fff' style={styles.navigator} initialRoute={{ component: ComponentName, // 当前 TabBarItem 需要加载的组件 passProps: {}, title: 'PageTitle', }}/> </Icon.TabBarItem> </TabBarIOS> ); } };
initialRoute
在上面 的代码中,component 表示该页面需要加载的视图组件,title 表示需要在头部显示的标题,passProps 用于页面间传递数据。
itemWrapperStyle
navigationBarHidden
shadowHidden
titleTextColor
{ component: function //表示该页面需要加载的视图组件 title: String // 表示需要在头部显示的标题 passProps: object // 用于页面间传递数据 backButtonIcon: // 后退按钮图标 backButtonTitle: // 后退按钮标题 leftButtonIcon: // 左边按钮图标 leftButtonTitle: // 左边按钮标题 onLeftButtonPress: // 左边按钮点击事件 rightButtonIcon: // 右边按钮图标 rightButtonTitle: // 右边按钮标题 onRightButtonPress: // 右边按钮点击事件 wrapperStyle: // 包裹样式 }
在步骤三中,讲解了 NavigatorIOS 组件的使用,实现了标签栏的 TabBar 切换效果,可以切换 TabBarItem 加载不同的 component;接下来,我们需要让 TabBarItem 对应的视图可以通过路由链接到其他页面,代码如下:
_navigateToSubview: function() { this.props.navigator.push({ // 调用navigator对象的push()方法 component: MessageDetail, title: "Detail", rightButtonTitle: 'New', onRightButtonPress: function(){ alert('On right button press!'); } }) }
在组件切换时, navigator 会作为一个熟悉对象被传递。 我们可以通过 this.prpps.navigator 获得 navigator 对象。它可以控制路由的跳转和组件的加载。
this.prpps.navigator
* push(route): 加载一个新的页面(视图或者路由)并且路由到该页面 * pop(): 返回到上一个页面 * popN(n): 一次性返回N个页面,当 N = 1时, 即相当于pop()方法的效果 * replace(route): 替换当前的路由 * replacePrevious(route): 替换前一个页面的视图并且回退过去 * resetTo(route): 取代最顶层的路由并且回退过去 * popToTop(): 回到最上层视图
rnpm link?
@Liberate99 使用链接库
使用navigationBarHidden后,返回按钮怎么显示呢?
完整实例代码
先来看看实现的效果图,可以看到底部是常见的一种tab切换效果,有选中效果,自定义的图标(非系统默认提供的图标),可切换不同的视图.
1. 安装
react-native-vector-icons
,提供了3000+的矢量图标在项目根目录下面里执行上面的命令,即可完成 react-native-vector-icons 的安装。
2. 使用 TabBarIOS 组件
这是
react-native-vector-icons
的一个 TabBar 示例代码,我们可以很简单的实现一个单独的 TabBar 效果,主要使用了TabBarIOS
组件 和react-native-vector-icons
提供的Icon.TabBarItem
来完成一个图标和文字组合的 tab 效果。注意在 TabBar 使用图标时需要使用组件默认提供的Icon.TabBarItem
代替 react-native 提供的TabBarIOS.Item
,否是会不生效。TabBarIOS
是 react-native 提供的一个标签栏组件,只适应于 iOS;包含三个属性barTintColor
:标签栏的背景颜色tintColor
:当前被选中的标签图标的颜色translucent
:一个布尔值,决定标签栏是否需要半透明化Icon.TabBarItem
是react-native-vector-icons提供的组件,包含三个属性iconName
:图标的名称selectedIconName
:选中时图标的名称iconSize
:图标的大小3. 使用 NavigatorIOS 组件
在步骤二中,已经完成了一个底部 TabBarItem 的效果,那接下来继续完成其他三个,并且保证每个 TabBarItem 的内容是相对应的; 这个时候就该 NavigatorIOS 组件出场了,我们修改上面的代码为:
initialRoute
属性来提供路由切换功能:在上面 的代码中,component 表示该页面需要加载的视图组件,title 表示需要在头部显示的标题,passProps 用于页面间传递数据。
NavigatorIOS 组件的属性:
barTintColor
: 导航条的背景颜色itemWrapperStyle
:为每一项定制样式,例如设置每个页面的背景颜色navigationBarHidden
:当其值为 true 时,隐藏导航栏shadowHidden
:是否隐藏阴影,其值为 true 或者 falsetintColor
: 导航栏上按钮的颜色设置titleTextColor
: 导航栏上的字体的颜色translucent
:一个布尔值,决定标签栏是否需要半透明化initialRoute
:初始化路由。 路由对象如下所示:4. 使用 navigator 对象
在步骤三中,讲解了 NavigatorIOS 组件的使用,实现了标签栏的 TabBar 切换效果,可以切换 TabBarItem 加载不同的 component;接下来,我们需要让 TabBarItem 对应的视图可以通过路由链接到其他页面,代码如下:
在组件切换时, navigator 会作为一个熟悉对象被传递。 我们可以通过
this.prpps.navigator
获得 navigator 对象。它可以控制路由的跳转和组件的加载。navigator 对象的主要方法如下:
5. 总结: