React-Native-TabNavigato

最新推荐文章于 2024-04-29 00:40:04 发布

barnett_y

最新推荐文章于 2024-04-29 00:40:04 发布

阅读量896

点赞数

分类专栏：【React-Native2点滴知识】

【React-Native2点滴知识】专栏收录该内容

698 篇文章 29 订阅

订阅专栏

React-Native-TabNavigator切换页面（一）

http://www.jianshu.com/u/e937e374c41aRN要想实现iOS中tabbar的效果，通用的就是用第三方的react-native-tab-navigator了，很好很强大，在此记录使用这个进行页面切换的效果

首先先下载 React-native-tab-navigator

npm install React-native-tab-navigator –save

然后在项目中导入

import TabNavigator from 'react-native-tab-navigator'

再然后就可以愉快的使用了
所属关系：TabNavigator-> TabNavigator.Item-> component(页面)

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

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

//导入react-native-tab-navigator
import TabNavigator from 'react-native-tab-navigator'

//导入对应的四个页面
import FirstPage from './FirstPage'
import SecondPage from './SecondPage'
import ThirdPage from './ThirdPage'
import FourPage from './FourPage'

export default class HomePage extends Component {
    constructor(props) {
        super(props);

//先声明一个状态，这个状态为了改变tabbar的
//点击tabbar，触发onPress方法，在里面改变状态，从而达到切换页面的效果

        this.state = {
            selectedTab:'首页'
            //默认选择第一个页面（'消息'默认选择第二个页面）
            //this.setState({selectedTab:'首页'}) 这个用于切换页面
            //selectedTab：'' ->为不同的值，就切换对应的页面
        };
    }

    render() {
        return (

          <View style={HomePageStyle.viewStyle}>

//初始化tabbar
              <TabNavigator>
//初始化tabbarItem

                  <TabNavigator.Item
                      title='首页'
                      onPress={()=>{this.setState({selectedTab:'首页'})}}
                      selected={this.state.selectedTab === '首页'}
                      titleStyle={HomePageStyle.TBarTitleStyle}
                      selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
                  >
//加载页面
                      <FirstPage/>
                  </TabNavigator.Item>

                  <TabNavigator.Item
                      title='消息'
                      onPress={()=>{this.setState({selectedTab:'消息'})}}
                      selected={this.state.selectedTab === '消息'}
                      titleStyle={HomePageStyle.TBarTitleStyle}
                      selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
                  >
                      <SecondPage/>
                  </TabNavigator.Item>

                  <TabNavigator.Item
                      title='联系人'
                      onPress={()=>{this.setState({selectedTab:'联系人'})}}
                      selected={this.state.selectedTab === '联系人'}
                      titleStyle={HomePageStyle.TBarTitleStyle}
                      selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
                  >
                      <ThirdPage/>
                  </TabNavigator.Item>

                  <TabNavigator.Item
                      title='我的'
                      onPress={()=>{this.setState({selectedTab:'我的'})}}
                      selected={this.state.selectedTab === '我的'}
                      titleStyle={HomePageStyle.TBarTitleStyle}
                      selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
                  >
                      <FourPage/>
                  </TabNavigator.Item>


              </TabNavigator>


          </View>

        );
    }
}
var HomePageStyle = StyleSheet.create({

    viewStyle:{
      flex:1,
    },
    TBarTitleStyle:{
        color:'black',
    },
    TBarTitleSelectStyle:{
        color:'red',
    },

});


AppRegistry.registerComponent('myTabBarAndNavigationTest', () => HomePage);

其他页面简单了写个view,这里贴出第一个页面的代码，其他雷同

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

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

import TabNavigator from 'react-native-tab-navigator'

export default class FirstPage extends Component {
    constructor(props){
        super(props);
        this.state ={
          selectedTab:'home'
        };
    }
    render() {
        return (
            <View style={FirstStyle.ViewStyle}>

                <Text style={FirstStyle.textStyle}>
                    第一个页面
                </Text>
            </View>
        );
    }
}
const FirstStyle = StyleSheet.create({
    ViewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
    },
    textStyle: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
AppRegistry.registerComponent('myTabBarAndNavigationTest', () => FirstPage);

tabbargif.gif

项目地址：https://github.com/chjwrr/RN-tabbar-navigation

React-Native-StatusBar

 1.animated bool   进行设置当状态栏的状态发生变化的时候是否需要加入动画。当前该动画支持backgroundColor,barStyle和hidden属性

 2.hidden  bool  进行设置状态栏是否隐藏

 3.backgroundColor   color类型，仅支持Android设备，设置状态栏的背景颜色

 4.translucent bool类型，仅支持Android设备, 进行设置状态栏是否为透明。当状态栏的值为true的时候，应用将会在状态栏下面进行绘制显示。这样在Android平台上面就是沉浸式的效果，可以达到Android和iOS应用一致性效果。该值常常配置半透明效果的状态栏颜色一起使用

 5.barStyle  enum('default','light-content')  枚举类型，仅支持iOS设备。进行设置状态栏文字的颜色

 6.networkActivityIndicatorVisible   bool类型，仅支持iOS设备。设置状态栏上面的网络进度加载器是否进行显示

 7.showHideTransition   enum('fade','slide') 枚举类型，仅支持iOS设备。进行设置当隐藏或者显示状态栏的时候的动画效果。默认值为'fade'

使用方法

当然需要导入
import {
    AppRegistry,
    StyleSheet,
    StatusBar,
} from 'react-native';


用法如下：

    render() {
        return (

            <View>

//白色，具体其他的参数参考上面的属性介绍
                <StatusBar barStyle={'light-content' }/>

            </View>

        );
    }

React-Native-TabNavigator+Navigator切换页面（二）

这篇记录下tabbar+navigation的方式切换页面

所属关系：TabNavigator-> TabNavigator.Item-> Navigator-> component(页面)

所有代码都在这里了，注释的也很清楚

/**
 * Created by mymac on 2017/3/31.
 * 创建tabbar，子试图是Navigator
 */

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

import TabNavigator from 'react-native-tab-navigator'

import FirstPage from './FirstPage'
import SecondPage from './SecondPage'
import ThirdPage from './ThirdPage'
import FourPage from './FourPage'

/* StatusBar的属性
* 1.animated bool   进行设置当状态栏的状态发生变化的时候是否需要加入动画。当前该动画支持backgroundColor,barStyle和hidden属性

 2.hidden  bool  进行设置状态栏是否隐藏

 3.backgroundColor   color类型，仅支持Android设备，设置状态栏的背景颜色

 4.translucent bool类型，仅支持Android设备, 进行设置状态栏是否为透明。当状态栏的值为true的时候，应用将会在状态栏下面进行绘制显示。这样在Android平台上面就是沉浸式的效果，可以达到Android和iOS应用一致性效果。该值常常配置半透明效果的状态栏颜色一起使用

 5.barStyle  enum('default','light-content')  枚举类型，仅支持iOS设备。进行设置状态栏文字的颜色

 6.networkActivityIndicatorVisible   bool类型，仅支持iOS设备。设置状态栏上面的网络进度加载器是否进行显示

 7.showHideTransition   enum('fade','slide') 枚举类型，仅支持iOS设备。进行设置当隐藏或者显示状态栏的时候的动画效果。默认值为'fade'
* */


export default class HomePageNav extends Component {

    constructor(props) {
        super(props);
        this.state = {
            //默认选择第一个页面（'消息'默认选择第二个页面）
            //this.setState({selectedTab:'首页'}) 这个用于切换页面
            //selectedTab：'' ->为不同的值，就切换对应的页面
            selectedTab:'首页',
        };
    }



    //配置场景动画,可以返回上面的动画类型
    configureScene(route) {

        //其他页面点击按钮跳转方法传入参数，在这里通过route.type可以接收到，对参数进行动画的判断
        console.log('route.type is ='+route.type);
        console.log('route.name is ='+route.name);

        if (route.type == 'normal'){
            return Navigator.SceneConfigs.PushFromRight
        }
        return Navigator.SceneConfigs.FloatFromRight

        //直接用同一个动画跳转
        //return Navigator.SceneConfigs.FloatFromRight

    }
    //渲染
    renderScene(route, navigator) {
        //导航条跳转传递参数   params 为传递的参数 其他页面传值时的名字要和这里设置的一样
        return <route.component {...route.params} navigator={navigator}/>

        //没有参数
        // return <route.component navigator={navigator} />
    }

    /*
    * 创建Navigator
    * component：Navigator管理的视图
    * return:Navigator
    * */
    creatNavigator (component){

        return (

            <Navigator
                initialRoute={{ name: component, component: component }}//默认加载的页面
                configureScene={this.configureScene}
                renderScene={this.renderScene}
                style={{flex:1}}
                navigationBar={
                  <Navigator.NavigationBar style={HomePageNavStyle.navStyleBase}
                  routeMapper={NavigationBarRouteMapper}/>}
            />
        )

    }
    /*
     * 创建tabbarItem
     * showtitle：标题
     * index：第几个
     * 子视图：Navigator
     * return：tabbarItem
     * */
    CreatTabNavigatorItem (showtitle  ,index ,normalImage , selectImage){

        let subview = {}

        switch (index){

            case 1:
                subview=this.creatNavigator(FirstPage);
                break;
            case 2:
                subview=this.creatNavigator(SecondPage);
                break;
            case 3:
                subview=this.creatNavigator(ThirdPage);
                break;
            case 4:
                subview=this.creatNavigator(FourPage);
                break;
        }


        return(

            /*TabNavigator.Item 属性
            * renderIcon: 必填项，即图标，但为function类型，所以这里需要用到Arrow Function
              renderSelectedIcon: 选中状态的图标，非必填，也是function类型
              badgeText: 即Tab右上角的提示文字，可为String或Number，类似QQ中Tab右上角的消息提示，非必填
              renderBadge: 提示角标渲染方式，function类型，类似render的使用，非必填
              title: 标题，String类型，非必填
              titleStyle: 标题样式，style类型，非必填
              selectedTitleStyle: 选中标题样式，style类型，非必填
              selected: bool型，是否选中状态，可使用setState进行控制，默认false
              onPress: function型，即点击事件的回调函数，这里需要控制的是state，而切换页面已经由控件本身帮我们实现好了
              allowFontScaling: bool型，是否允许字体缩放，默认false
            * */
            <TabNavigator.Item
                title={showtitle}
                onPress={()=>{this.setState({selectedTab:showtitle})}}
                selected={this.state.selectedTab === showtitle}
                titleStyle={HomePageNavStyle.TBarTitleStyle}
                selectedTitleStyle={HomePageNavStyle.TBarTitleSelectStyle}
                renderIcon={() => {return <Image source={normalImage}/> }}
                renderSelectedIcon={() => { return <Image source={selectImage}/> }}

                /*
                * 另一种写法，如果又返回值，可以直接省去{return }
                * renderIcon={() =>  <Image source={normalImage} />}
                * renderSelectedIcon={() =>  <Image source={selectImage} />}
                * */
            >

                {subview}

            </TabNavigator.Item>
        );
    }
c
    /*
     * 创建tabbar
     * return：返回4个item的tabbar
     * */
    CreatTabBarView () {
        return(

            <TabNavigator>

                {this.CreatTabNavigatorItem('首页',1 , require('./appImages/homepage@2x.png') ,require('./appImages/homepage_select@2x.png'))}
                {this.CreatTabNavigatorItem('消息',2 , require('./appImages/message@2x.png'), require('./appImages/message_select@2x.png'))}
                {this.CreatTabNavigatorItem('朋友',3 ,  require('./appImages/friend@2x.png'), require('./appImages/friend_select@2x.png'))}
                {this.CreatTabNavigatorItem('我的',4 , require('./appImages/mine@2x.png'),require('./appImages/mine_select@2x.png') )}


            </TabNavigator>

        );



    }

    render() {
        return (

            <View style={HomePageNavStyle.viewStyle}>

                {this.CreatTabBarView()}


                <StatusBar barStyle={'light-content' }/>

            </View>

        );
    }
}

//切换tabbar时，修改对应的Navigator的标题
let getNavigatorTitle = (route) => {

    let NavigatorTitle;

    switch (route.component.name){

        case 'FirstPage':
            NavigatorTitle = '首页'
            break;
        case 'SecondPage':
            NavigatorTitle = '消息'
            break;
        case 'ThirdPage':
            NavigatorTitle = '朋友'
            break;
        case 'FourPage':
            NavigatorTitle = '我的'
            break;

    }


   return (
       <View>
           <Text style={HomePageNavStyle.navTitleStyle}>

               {NavigatorTitle}

           </Text>
       </View>

   );
}


//创建Navigator的标题、左按钮、右按钮
var NavigationBarRouteMapper = {
    // 标题

    Title(route, navigator, index, navState) {


        return (

            getNavigatorTitle(route)

        );
    },
    // 左键
    LeftButton(route, navigator, index, navState) {
        if (index > 0) {
            return (
                <View>
                    <TouchableOpacity
                        underlayColor='transparent'
                        onPress={() => {
                            if (index > 0) {
                                navigator.pop()
                            }
                        }}>
                        <Text style={HomePageNavStyle.navLeftButtonStyle}>
                            返回
                        </Text>
                    </TouchableOpacity>
                </View>
            );
        } else {
            return null;
        }
    },
    RightButton(route, navigator, index, navState) {
        if (route.onPress)
            return (
                <View>
                    <TouchableOpacity
                        onPress={() => route.onPress()}>
                        <Text style={HomePageNavStyle.navRightButtonStyle}>
                            right
                        </Text>
                    </TouchableOpacity>
                </View>
            );
    },

};






var HomePageNavStyle = StyleSheet.create({

    viewStyle:{
        flex:1,
    },
    TBarTitleStyle:{
        color:'black',
    },
    TBarTitleSelectStyle:{
        color:'red',
    },

    textStyleBase:{
        marginTop:40,
        marginHorizontal:20,
        color:'red',
        textAlign:'center',
    },
    navStyleBase:{
        backgroundColor:'blue',
    },
    navTitleStyle:{
        color:'white',
        textAlign:'center',
        flex:1,
        fontSize:18,
        fontWeight:'bold',
        marginVertical:5,
    },
    navLeftButtonStyle:{
        color:'white',
        marginLeft:10,
        fontSize:15,
        marginTop:5,
    },
    navRightButtonStyle:{
        color:'black',
        marginRight:10,
        fontSize:15,

    },

});


AppRegistry.registerComponent('myTabBarAndNavigationTest', () => HomePageNav);

有一个需要注意的地方
切换tabbar时，导航条的title改变，这里需要说一下，在使用导航条的情况下，每次显示一个页面都会走

//创建Navigator的标题、左按钮、右按钮
var NavigationBarRouteMapper = {
    // 标题

    Title(route, navigator, index, navState) {


        return (

            getNavigatorTitle(route)

        );
    },

};

这个方法，Title里面有四个参数，我们需要route这个参数
它有一个component属性，component有一个name属性，
这个name的值就是这个页面类名

例：
export default class FirstPage extends Component {

name的值就是FirstPage

就可以知道当前是哪个类了，知道了哪个类，就可以设置对应的导航条Title了

tabbar.gif

项目地址：https://github.com/chjwrr/RN-tabbar-navigation

React-Native-TabNavigator+Navigator切换页面（二级隐藏tabbar）（三）

上一篇记录了tabbar+navigation切换页面，但是有一个问题，当push到第二级页面时，tabbar还在。

有些项目要求二级页面隐藏tabbar，所以现在再开一篇文章记录下

普通的tabbar+navigation的结构是：
tabbar->tabbarItem->navigator->homeView

但是想实现二级页面隐藏tabbar，这个结构就不行了，需要换一种结构
navigation->tabbar->tabbarItem->homeView

这样的结构才可以实现二级页面隐藏tabbar

main.js

export default class HomePageTabbarHidden extends Component {

    componentDidMount() {
        <StatusBar barStyle={'light-content' }/>
    }

    render() {
        return (
//此处加载 导航条
            <HPTB_Navigator/>

        );
    }
}

navigator.js

    render(){
        return(
//此处的 HPTBtabbar 就是tabbar
            <Navigator
                initialRoute={{ name: 'HPTBtabbar', component: HPTBtabbar }}//默认加载的页面
                configureScene={this.configureScene}
                renderScene={this.renderScene}
                style={{flex:1}}
                navigationBar={
                  <Navigator.NavigationBar style={HomePageNavStyle.navStyleBase}
                  routeMapper={NavigationBarRouteMapper}/>}
            />


        )

    }

tabbar.js

 render() {
        return (

                <TabNavigator>

                    <TabNavigator.Item
                        title='主页'
                        onPress={()=>{this.setState({selectedTab:'HomeView'})}}
                        selected={this.state.selectedTab === 'HomeView'}
                        titleStyle={HPTB_tabbarStyle.textStyle}
                        selectedTitleStyle={HPTB_tabbarStyle.selectedTextStyle}
                    >
//此处加载页面，这种方式解决push不过去的问题
                        <HomeView navigator={this.props.navigator} />

                    </TabNavigator.Item>

                    <TabNavigator.Item
                        title='次页'
                        onPress={()=>{this.setState({selectedTab:'HomeView1'})}}
                        selected={this.state.selectedTab === 'HomeView1'}
                        titleStyle={HPTB_tabbarStyle.textStyle}
                        selectedTitleStyle={HPTB_tabbarStyle.selectedTextStyle}
                    >

                        <HomeView1 navigator={this.props.navigator} />

                    </TabNavigator.Item>

                </TabNavigator>


        );
    }

tabbarhiddent.gif

项目地址：https://github.com/chjwrr/RN-tabbar-navigation

barnett_y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React-Native-TabNavigato

React-Native-TabNavigator切换页面（一）http://www.jianshu.com/u/e937e374c41aRN要想实现iOS中tabbar的效果，通用的就是用第三方的react-native-tab-navigator了，很好很强大，在此记录使用这个进行页面切换的效果首先先下载 React-native-tab-navigatornpm in
复制链接

扫一扫