We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
先来看看实现的效果图,可以看到底部是常见的一种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(): 回到最上层视图
The text was updated successfully, but these errors were encountered:
rnpm link?
Sorry, something went wrong.
@Liberate99 使用链接库
使用navigationBarHidden后,返回按钮怎么显示呢?
No branches or pull requests
完整实例代码
先来看看实现的效果图,可以看到底部是常见的一种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. 总结:
The text was updated successfully, but these errors were encountered: