TabBarIOS部分　　

　　在目前市面上的APP中，大部分都是选项与选项之间的切换，比如：微信、微博、QQ空间......, 在iOS中，我们可以通过TabItem类进行实现。那么，在React Native中，我们应该怎么实现呢？

　　在React Native中可以通过TabBarIOS和TabBarIOS.Item组件来实现选项卡切换效果，大家可以看到后面带有IOS，所以这个组件是不支持Android的，当然后面我们可以自定义该组件。

一、TabBarIOS常见的属性

View的所有属性都可以被继承

barTintColor color 设置tab条的背景颜色

tintColor color 设置tab条上被选中图标的颜色

translucent bool 设置Tab栏是不是半透明的效果

二、TabBarIOS.Item常见的属性

badge number

　　在图标的右上方显示小红色气泡，显示信息

icon Image.propTypes.source

　　Tab按钮自定义的图标，如果systemicon属性被定义了，那么该属性会被忽略

onPress function

　　当Tab按钮被选中的时候进行回调，你可以设置selected={true}来设置组件被选中

selected bool

该属性标志子页面是否可见，如果是一个空白的内容页面，那么一定是忘记了选中任何的一个页面标签Tab

selectedIcon Image.propTypes.source

设置当Tab按钮被选中的时候显示的自定义图标，如果systemIcon属性被设置了，那么该属性会被忽略。如果定义了icon属性，但是当前的selectedIcon属性没有设置，那么该图标会被设置成蓝色

style 设置样式风格，继承View的样式各种风格

systemIcon

　　enum('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated')

系统预定义的图标，如果你使用这些图标，那么你上面设置的标题，选中的图标都会被这些系统图标所覆盖。

title string

在Tab按钮图标下面显示的标题信息，如果你设置了SystemIcon属性，那么该属性会被忽略

三、TabBarIOS.Item案例展示

　　代码展示：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TabBarIOS
} from 'react-native';

var Car = require('./Car.json');

export default class FListViewDemo1 extends Component{
  constructor(props){
    super(props);
    this.state = {
      selectedTabBarItem:'home'
    };
  }
  render(){
    return(
      <View style={styles.container}>

        <View style={styles.headerViewStyle}>
           <Text style={{color:'white'}}>Tab选项卡切换</Text>
        </View>

        <TabBarIOS barTintColor='white'>

            <TabBarIOS.Item systemIcon="contacts"
                            badge="3"
                            // title="张三"
                            selected={this.state.selectedTabBarItem == 'home'}
                            onPress ={()=>{this.setState({selectedTabBarItem:'home'})}}
            >
              <View style={[styles.commentViewStyle,{backgroundColor:'red'}]}>
                  <Text>首页</Text>
              </View>
            </TabBarIOS.Item>

            <TabBarIOS.Item systemIcon="bookmarks"
                            // title="李四"
                            selected={this.state.selectedTabBarItem == 'second'}
                            onPress ={()=>{this.setState({selectedTabBarItem:'second'})}}
            >
                <View style={[styles.commentViewStyle,{backgroundColor:'green'}]}>
                    <Text>第二页</Text>
                </View>
            </TabBarIOS.Item>

            <TabBarIOS.Item systemIcon="contacts"
                            // title="王二"
                            selected={this.state.selectedTabBarItem == 'third'}
                            onPress ={()=>{this.setState({selectedTabBarItem:'third'})}}
            >
              <View style={[styles.commentViewStyle,{backgroundColor:'blue'}]}>
                  <Text>第三页</Text>
              </View>
            </TabBarIOS.Item>

            <TabBarIOS.Item systemIcon="contacts"
                            // title ="麻子"
                            selected={this.state.selectedTabBarItem == 'four'}
                            onPress ={()=>{this.setState({selectedTabBarItem:'four'})}}
            >
              <View style={[styles.commentViewStyle,{backgroundColor:'purple'}]}>
                  <Text>第四页</Text>
              </View>
            </TabBarIOS.Item>
        </TabBarIOS>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  headerViewStyle:{
    height:64,
    backgroundColor:'black',
    justifyContent:'center',
    alignItems:'center'
  },
  commentViewStyle:{
    flex:1,
    alignItems:'center',
    justifyContent:'center'
  },
  container:{
    flex:1,
    backgroundColor:'#f5fcff'
  }
});

　　提示：在TabBarIOS.Item中，如果设置了systemIcon，再去设置title将不会起作用。

Navigator部分

　　在开发中，我们需要实现多个界面的切换，这时候就需要一个导航控制器来进行各种效果的切换。那么，在React Native中有两个组件能够实现这样的效果：Navigator和NavigatorIOS。

其中Navigator是适配Android和iOS，而NavigatorIOS则是包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。

一、Navigator

很多时候，我们需要导航器来应对不同场景（页面）间的切换。它通过路由对象来分辨不同的场景，我们这里采用的就是 renderScene 方法，根据指定的路由来渲染。

1.1 常用的属性

initialRoute ={{ name: 'home', component: HomeScene }}

　　这个指定了默认的页面，也就是启动的组件页面

　　configureScene ={() => {

　　　　return Navigator. SceneConfigs .HorizontalSwipeJump;

　　}}

　　页面之间跳转时候的动画手势，可以看这个目录:node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳转的时候的方向)，比如：PushFromRight FloatFromRight FloatFromLeft FloatFromBottom FloatFromBottomAndroid FadeAndroid HorizontalSwipeJump HorizontalSwipeJumpFromRight VerticalUpSwipeJump VerticalDownSwipeJump等等。

renderScene

具体是方法如下:(route, navigator) =><MySceneComponent title={route.title} navigator={navigator} />

两个参数中的route包含的是initial的时候传递的name和component，而navigator是一个我们需要用的Navigator的对象；

所以当我们拿到route中的component的时候，我们就可以将navigator传递给它，正因为如此，我们的组件HomeScene才可以通过 this.props.navigator，拿到路由。

initialRouteStack [object] 参数对象数组

这是一个初始化的路由数组进行初始化。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用该最后一项作为初始路由。如果initalRouteStack属性没有设置的话，该会生成只包含initalRoute值的数组

navigationBar node

该为可选的参数，在页面切换中用来提供一个导航栏

navigator object

该为可选参数，可以从父类导航器中获取导航器对象

sceneStyle 样式风格

该继承了View视图的所有样式风格，用于设置每个页面容器的风格

1.2 常用的导航器方法

当获取了导航器对象的引用，我们可以进行调用以下一些方法来实现页面导航功能:

getCurrentRoutes() 该进行返回存在的路由列表信息

jumpBack() 该进行回退操作但是该不会卸载(删除)当前的页面

jumpForward() 进行跳转到相当于当前页面的下一个页面

jumpTo(route) 根据传入的一个路由信息，跳转到一个指定的页面(该页面不会卸载删除)

push(route) 导航切换到一个新的页面中，新的页面进行压入栈。通过jumpForward()方法可以回退过去

pop() 当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面

replace(route) 只用传入的路由的指定页面进行替换掉当前的页面

replaceAtIndex(route,index) 传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面

replacePrevious(route) 传入路由，通过指定路由的页面替换掉前一个页面

resetTo(route) 进行导航到新的界面，并且重置整个路由栈

immediatelyResetRouteStack(routeStack) 该通过一个路由页面数组来进行重置路由栈

popToRoute(route) 进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除

popToTop() 进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除

1.3 默认写法

<Navigator
    initialRoute={{ name: defaultName, component: defaultComponent }}
    configureScene={(route) => {
        return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
    }}
    renderScene={(route, navigator) => {
        let Component = route.component;
        return <Component {...route.props} navigator={navigator} />
    }}
/>

二、Navigator.IOS

NavigatorIOS包装了UIKit的导航功能，可以使用左划功能来返回到上一界面。

2.1 常用的导航器方法

push(route)

导航器跳转到一个新的路由。

pop()

回到上一页。

popN(n)

回到N页之前。当N=1的时候，效果和 pop() 一样。

replace(route)

替换当前页的路由，并立即加载新路由的视图。

replacePrevious(route)

替换上一页的路由/视图。

replacePreviousAndPop(route)

替换上一页的路由/视图并且立刻切换回上一页。

resetTo(route)

替换最顶级的路由并且回到它。

popToRoute(route)

一直回到某个指定的路由。

popToTop()

回到最顶层的路由。

2.2 常用的属性

barTintColor string

导航条的背景颜色。

initialRoute {

　　component: function, // 路由到对应的版块

　　title: string, // 标题

　　passProps: object, // 传递的参数

　　backButtonIcon: Image.propTypes.source, // 返回按钮

　　backButtonTitle: string, // 返回按钮标题

　　leftButtonIcon:Image.propTypes.source,

　　leftButtonTitle: string,

　　onLeftButtonPress: function,

　　rightButtonIcon: Image.propTypes.source,

　　rightButtonTitle: string,

　　onRightButtonPress: function,

　　wrapperStyle: [object Object]

}

NavigatorIOS使用"路由"对象来包含要渲染的子视图、它们的属性、以及导航条配置。"push"和任何其它的导航函数的参数都是这样的路由对象。

比如：下面新闻列表跳转到新闻详情页详情页：

itemWrapperStyle View#style

导航器中的组件的默认属性。一个常见的用途是设置所有页面的背景颜色。

navigationBarHidden bool

　　一个布尔值，决定导航栏是否隐藏。

shadowHidden bool

　　一个布尔值，决定是否要隐藏1像素的阴影。

tintColor string

　　导航栏上按钮的颜色。

titleTextColor string

　　导航器标题的文字颜色。

translucent bool

　　一个布尔值，决定是否导航条是半透明的。

三、综合小案例

　　3.1 部分核心代码

React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件

TabBarIOS部分

Navigator部分

猜你喜欢