native react 底部工具条

2017-04-30 19:49:44 kerryqpw 阅读数 5823

reactNative底部导航菜单栏实现


          实现效果图:

         


       需要实现的效果: 点击下方最热、趋势、收藏、我的,相应的标签图标会变蓝色,App上方

      渲染相应的页面。

     

       实现思路:

       1、在项目中引入第三方reactNative插件  react-native-tab-navigator

           npm install react-native-tab-navigator -save

          该插件主要提供的功能是通过TabNavigator创建底部标签横向列表,管理TabNavigatorItem

         下载下来react-native-tab-navigator   查看源码

         TabNavigator.js   :通过  TabNavigator.ite,=TabNavigator.Item   这句代码可以分析出,

          TabNavigator.Item是TabNavigator下属组件

           通过查看TabNavigator.Item的源码:

  static propTypes = {
    renderIcon: PropTypes.func,
    renderSelectedIcon: PropTypes.func,
    badgeText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    renderBadge: PropTypes.func,
    title: PropTypes.string,
    titleStyle: Text.propTypes.style,
    selectedTitleStyle: Text.propTypes.style,
    tabStyle: View.propTypes.style,
    selected: PropTypes.bool,
    onPress: PropTypes.func,
    allowFontScaling: PropTypes.bool,
  };

       可以分析出TabNavigator.Item的

         未选中图标:renderIcon

         选中图标: renderSelectedIcon

         标题:title

         标题风格:titleStyle

         选中标题风格: selectedTitleStyle

         是否为选中状态:selected

         点击后执行的方法:onPress


    2.点击onPress方法

       设置点击tab图标后改变selectedTab的state状态值

      ,页面重新渲染,是内容页面和标签图标重新渲染

  

   

    代码实现:

    HomePage.js:

   

export default class HomePage extends Component{
    constructor(props){
        super(props);
        this.state={
          selectedTab:'popular', //默认选中的选项卡
        };
    }

    render(){
        return <View style={styles.container}>
                <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab==='popular'}
                        title="最热"
                        selectedTitleStyle={{color:'#63B8FF'}}
                        renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_popular.png')} />}
                        renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_popular.png')}/>}
                        onPress={()=>this.setState({selectedTab:'popular'})}
                    >
                        {/*选项卡对应的页面*/}
                        <PopularPage/>
                    </TabNavigator.Item>

                    <TabNavigator.Item
                        selected={this.state.selectedTab==='trending'}
                        title="趋势"
                        selectedTitleStyle={{color:'#63B8FF'}}
                        renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_trending.png')} />}
                        renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_trending.png')}/>}
                        onPress={()=>this.setState({selectedTab:'trending'})}
                    >
                        <View style={{backgroundColor:'#0F0',flex:1}}></View>
                    </TabNavigator.Item>

                    <TabNavigator.Item
                        selected={this.state.selectedTab==='favorite'}
                        title="收藏"
                        selectedTitleStyle={{color:'#63B8FF'}}
                        renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_favorite.png')} />}
                        renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_favorite.png')}/>}
                        onPress={()=>this.setState({selectedTab:'favorite'})}
                    >
                        <CustomViewPage {...this.props} />
                    </TabNavigator.Item>

                    <TabNavigator.Item
                        selected={this.state.selectedTab==='my'}
                        title="我的"
                        selectedTitleStyle={{color:'#63B8FF'}}
                        renderIcon={()=><Image style={styles.icon} source={require('../../res/images/ic_my.png')} />}
                        renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_my.png')}/>}
                        onPress={()=>this.setState({selectedTab:'my'})}
                    >
                        <MyPage {...this.props} />
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
    }
    

    componentWillUnmount(){
        this.listener.remove();
    }


}

const styles=StyleSheet.create({
    container:{
        flex:1
    },
    icon:{
        width:26,
        height:26
    }
});









      

2018-11-12 16:45:28 Destiny_strive 阅读数 4180

实现效果如下:

          点击选项卡可以切换并且改变上面页面的颜色、选中图标的颜色、图标

 

首先需要安装:

npm install react-native-tab-navigator --save

然后在需要做导航栏的文件引入:

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

现在可以开始开发导航栏了,这是我做的这个例子的完整代码:

import React, {Component} from 'react';
import {StyleSheet, View,Text,Image} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'

export default class App extends Component<Props> {
  /*初始化state*/
  constructor(props){
      super();
      this.state={
        selectedTab:'tb_msg',
      }
  }
    /**
     * 公共组件方法
     * @param selectedTab 选中的tab
     * @param title
     * @param icon
     * @param selectedIcon
     * @param imageStyle  选中时渲染图标的颜色
     * @param mark  角标
     * @param viewContent  页面内容
     * @returns {*}
     */
  tabNavigatorItems(selectedTab,title,icon,selectedIcon,imageStyle,mark,viewContent){
      return (
          <TabNavigator.Item
              selected={this.state.selectedTab === selectedTab }
              title={title}
              renderIcon={()=> <Image style={styles.myImage} source={icon}/> }
              renderSelectedIcon={()=> <Image style={[styles.myImage,{tintColor:imageStyle}]} source={selectedIcon}/> }
              badgeText={mark}
              onPress={()=> this.setState({selectedTab:selectedTab}) }>
              <View style={{flex:1}}><Text>{viewContent}</Text></View>
          </TabNavigator.Item>
      )
  }

  render() {
    return (
      <View style={styles.container}>
         <TabNavigator>
            {this.tabNavigatorItems('tb_msg',"消息",require('./images/msg.png'),require("./images/selected_msg.png"),'#ffe09a',"1","消息页面内容")}
            {this.tabNavigatorItems('tb_contacts',"联系人",require('./images/contacts.png'),require("./images/selected_contacts.png"),'#65bb74',"","联系人页面内容")}
            {this.tabNavigatorItems('tb_watch',"看点",require('./images/wacth.png'),require("./images/selected_watch.png"),'#6ebef3',"","看点页面内容")}
            {this.tabNavigatorItems('tb_dynamic',"动态",require('./images/dynamic.png'),require("./images/selected_dynamic.png"),'#622193',"","动态页面内容")}
         </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    myImage:{
        width:22,
        height:22,
    }
});

下面是组件的属性和描述

TabNavigator props:

prop default type description
sceneStyle inherited object (style) 场景样式,即Tab页容器的样式,可按View的style设置
tabBarStyle inherited object (style) TabBar的样式,基本也可按照普通的style写法进行设置
tabBarShadowStyle inherited object (style) TabBar阴影的样式,不过对于扁平化的设计,这个属性应该用处不大
hidesTabTouch false boolean bool类型,即是否隐藏Tab按钮的按下效果

TabNavigator.Item props:

prop default type description
renderIcon none function 即图标,但为function类型,所以这里需要用到Arrow Function
renderSelectedIcon none function 选中状态的图标,非必填,也是function类型
badgeText none string or number 即Tab右上角的提示文字,可为String或Number,类似QQ中Tab右上角的消息提示,非必填
renderBadge none function 提示角标渲染方式,function类型,类似render的使用,非必填
title none string 标题,String类型,非必填
titleStyle inherited style 标题样式,style类型,非必填
selectedTitleStyle none style 选中标题样式,style类型,非必填
tabStyle inherited style styling for tab
selected none boolean bool型,是否选中状态,可使用setState进行控制,默认false
onPress none function 即点击事件的回调函数,这里需要控制的是state
allowFontScaling false boolean bool型,是否允许字体缩放,默认false
2018-04-28 09:52:49 sufu1065 阅读数 1119

导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNative0.44版本以后已经被移除了。

好在有人提供了更好的导航组件,就是我们今天要讲的react-navigation,并且ReactNative官方更推荐我们使用此组件。

 

本篇文章只讲解基础用法,如果你想了解更多,请戳这里->戳我

 简介

react-navigation主要包括导航,底部tab,顶部tab,侧滑等,分别为:

  • 导航 -> StackNavigator
  • 底部或者顶部tab -> TabNavigator
  • 侧滑 -> DrawerNavigator

我们今天主要讲TabNavigator。

 效果展示

 实现代码

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Button,
    Text,
    View,
    Image,
    StatusBar
} from 'react-native';
import { StackNavigator, TabBarBottom, TabNavigator } from "react-navigation";


class Home extends React.Component {
    static navigationOptions = {
        tabBarLabel: '热点',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/hot_hover.png') : require('../res/images/hot.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>!这是热点</Text>
            </View>
        );
    }
}

class Circle extends React.Component {
    static navigationOptions = {
        tabBarLabel: '圈子',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/coterie.png') : require('../res/images/coterie.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>!这是圈子</Text>
            </View>
        );
    }
}

class Tools extends React.Component {
    static navigationOptions = {
        tabBarLabel: '工具',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/tool.png') : require('../res/images/tool.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>!这是工具</Text>
            </View>
        );
    }
}

class Mypage extends React.Component {
    static navigationOptions = {
        tabBarLabel: '我的',
        tabBarIcon: ({ focused, tintColor }) => (
            <Image
                source={focused ? require('../res/images/my_hover.png') : require('../res/images/my.png')}
                style={{ width: 26, height: 26, tintColor: tintColor }}
            />
        )
    };
    render() {
        return (
            <View style={styles.container}>
                <Text>!这是我的</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    }
});


const MyApp = TabNavigator(
    {
        Home: {
            screen: Home,
        },
        Circle: {
            screen: Circle,
        },
        Tools: {
            screen: Tools,
        },
        Mypage: {
            screen: Mypage,
        },
    },
    {
        tabBarOptions: {
            activeTintColor: '#4BC1D2',
            inactiveTintColor: '#000',
            showIcon: true,
            showLabel: true,
            upperCaseLabel: false,
            pressColor: '#823453',
            pressOpacity: 0.8,
            style: {
                backgroundColor: '#fff',
                paddingBottom: 0,
                borderTopWidth: 0.5,
                borderTopColor: '#ccc',
            },
            labelStyle: {
                fontSize: 12,
                margin: 1
            },
            indicatorStyle: { height: 0 }, //android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了
        },
        tabBarPosition: 'bottom',
        swipeEnabled: false,
        animationEnabled: false,
        lazy: true,
        backBehavior: 'none',
    });

module.exports = MyApp;

 配置说明

NavigationOptions
当然,通过NavigationOptions来配置我们的tabBarItem:
title - 标题
tabBarVisible - 是否可见
tabBarIcon - 配置图片,当然,完全可以不使用图片
tabBarLabel - 也是配置标题,只不过title既能配置tab的标题,也能配置navigation的标题

 

TabNavigatorConfig
tabBarComponent- 用作标签栏的组件,例如 (这是iOS上的默认设置), (这是Android上的默认设置)TabBarBottomTabBarTop
tabBarPosition- 标签栏的位置可以是或'top''bottom'
swipeEnabled - 是否允许在标签之间进行滑动
animationEnabled - 是否在更改标签时动画
lazy - 是否根据需要懒惰呈现标签,而不是提前制作
tabBarOptions - 配置标签栏,如下所示。
几个选项被传递到底层路由器来修改导航逻辑:
initialRouteName - 首次加载时初始标签路由的routeName
order - 定义选项卡顺序的routeNames数组
paths - 将routeName映射到路径配置,该配置将覆盖routeConfigs中设置的路径。
backBehavior - 后退按钮是否会使Tab键切换到初始选项卡?如果是,否则设置。默认为行为。initialRoutenoneinitialRoute


tabBarOptions for (iOS上的默认标签栏)TabBarBottom
activeTintColor - 活动标签的标签和图标颜色
activeBackgroundColor - 活动选项卡的背景颜色
inactiveTintColor - 非活动标签的标签和图标颜色
inactiveBackgroundColor - 非活动标签的背景颜色
showLabel - 是否显示标签的标签,默认为true
style - 标签栏的样式对象
labelStyle - 标签标签的样式对象
tabStyle - 标签的样式对象


tabBarOptions for (Android上的默认标签栏)TabBarTop
activeTintColor - 活动标签的标签和图标颜色
inactiveTintColor - 非活动标签的标签和图标颜色
showIcon - 是否显示标签的图标,默认值为false
showLabel - 是否显示标签的标签,默认为true
upperCaseLabel - 是否使标签大写,默认为true
pressColor - 材质波纹颜色(Android> = 5.0)
pressOpacity - 按压标签的不透明度(iOS和Android <5.0 only)
scrollEnabled - 是否启用可滚动选项卡
tabStyle - 标签的样式对象
indicatorStyle - 标签指示器的样式对象(选项卡底部的行)
labelStyle - 标签标签的样式对象
iconStyle - 标签图标的样式对象
style - 标签栏的样式对象

 

小技巧

1.去掉安卓下的下划线,设置:tabBarOptions => indicatorStyle:{ height: 0 };

2.底部导航在导航最上方添加一条分割线,设置:tabBarOptions => style => borderTopWidth: 0.5, borderTopColor: '#ccc';

3.导航安卓图标和文字间隙比较大,手动调整小设置:tabBarOptions => labelStyle => margin: 0;

 

2019-01-29 06:07:54 weixin_33966365 阅读数 147

前言

​ 接触过ReactNative(以下简称RN)的大概都知道,react-navigation提供了两种开箱即用的导航栏组件

分别是这样的

尽管官方提供了导航栏的开箱即用方案,但是实际开发里面,我们会遇到各种各样的导航栏,各种各样的动效,所以以上可能无法满足我们的开发需求,我们就需要定制化的去做我们导航栏

例如我们UI给我的导航栏样式

我的内心: 这他么中间凸起的我怎么做,老子只是一个小前端,app很渣啊啊啊

借助可爱的google,我找到了解决方法

就是

TabBarComponent

这个api在文档资料很少,所以想要知道怎么用只能通过网络上的资源了

其中深受这篇文案的启发

Let's Create A Custom Animated Tab Bar With React Native

这位外国友人(话说reactnative在国外似乎还有点火),借助动画库react-native-pose,完成了这样的效果

虽然是英文博客,但是配合翻译基本阅读无障碍,借助他的博客,我完成了ReactNative的自定义导航栏,效果如下

自定义底部导航栏

  1. 自定义底部导航栏是基于createBottomTabNavigator,所以我们使用这个api来创建底部导航栏
  2. 指定createBottomTabNavigator的tabBarComponent
  3. tabBarComponent内部进行底部导航栏的编写

增加底部导航器

import React from 'react'
import { createBottomTabNavigator } from 'react-navigation'
import Icon from '../Common/Icon' // 自定义图标库
import TabBar from '../Common/TabBar' // tabBarComponent 自定义组件
// 页面
import Category from '../View/TabBar/Category/Category'
import Main from '../View/TabBar/Main/Main'
import My from '../View/TabBar/My/My'
import OrderList from '../View/TabBar/OrderList/OrderList'
import OnlineDoctor from '../View/TabBar/OnlineDoctor/OnlineDoctor'
export default createBottomTabNavigator(
  {
    // 首页:
    one: {
      screen: Main,
      navigationOptions: () => {
        return {
          tabBarIcon: ({ tintColor }) => {
            var soureImge
            if (tintColor == '#CBCBCB') {
              soureImge = 'main'
            } else {
              soureImge = 'mainActive'
            }
            return <Icon name={soureImge} size={26} color={tintColor} />
          }
        }
      }
    },
    //分类:
     two: {
      screen: Category,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => {
          var soureImge
          if (tintColor == '#CBCBCB') {
            soureImge = 'Category'
          } else {
            soureImge = 'CategoryActive'
          }
          return <Icon name={soureImge} size={26} color={tintColor} />
        }
      }
    },
    //问诊:
    three: {
      screen: OnlineDoctor,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => {
          var soureImge
          if (tintColor == '#CBCBCB') {
            soureImge = 'onLine'
          } else {
            soureImge = 'onLineActive'
          }
          return <Icon name={soureImge} size={48} color={tintColor} />
        }
      }
    },
    // 购物篮: 
    four: {
      screen: OrderList,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => {
          var soureImge
          if (tintColor == '#CBCBCB') {
            soureImge = 'OrderList'
          } else {
            soureImge = 'OrderListActive'
          }
          return <Icon name={soureImge} size={26} color={tintColor} />
        }
      }
    },
    //我的:
    five: {
      screen: My,
      navigationOptions: () => {
        return {
          tabBarIcon: ({ tintColor }) => {
            var soureImge
            if (tintColor == '#CBCBCB') {
              soureImge = 'My'
            } else {
              soureImge = 'MyActive'
            }
            return <Icon name={soureImge} size={26} color={tintColor} />
          }
        }
      }
    }
  },
  {
    initialRouteName: 'one', // 初始化页面
    tabBarComponent: TabBar,
    tabBarOptions: {
      activeTintColor: '#F34C56',
      inactiveTintColor: '#CBCBCB'
    }
  }
)
        
复制代码

工具函数

图标没有使用图标库,直接搞一个图标库比较得心应手

../Common/Icon.js

import React from 'react'
import { Image } from 'react-native'
import { TabIcon } from './Image'

const Icon = ({ name, style, size }) => {
  const icon = TabIcon[name]
  return (
    <Image
      source={icon}
      style={[{ width: size, height: size }, style]}
    />
  )
}

export default Icon
复制代码

而对于图片则进行统一管理

../Common/Image.js

/**
 * 所有的图片资源都从这里统一管理
 */
// 底部导航栏的图片资源
export const TabIcon = {
  main: require('..'),
  mainActive: require('..'),
  Category: require('..'),
  CategoryActive: require('..'),
  onLine: require('..'),
  onLineActive: require('..'),
  OrderList: require('..'),
  OrderListActive: require('..'),
  My: require('..'),
  MyActive: require('..'),
}
复制代码

自定义底部导航器

万事俱备,下面就是自定义底部导航器了,就和定义React组件一样

import React from 'react'
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TouchableNativeFeedback,
  Dimensions
} from 'react-native'
import posed from 'react-native-pose' // react-native 动画库

const Scaler = posed.View({ // 定义点击缩放
  active: { scale: 1 },
  inactive: { scale: 0.9 }
})

const TabBar = props => {
  const {
    renderIcon,
    getLabelText,
    activeTintColor,
    inactiveTintColor,
    onTabPress,
    onTabLongPress,
    getAccessibilityLabel,
    navigation
  } = props

  const { routes, index: activeRouteIndex } = navigation.state
  return (
    <Scaler style={Styles.container}>
      {routes.map((route, routeIndex) => {
        const isRouteActive = routeIndex === activeRouteIndex
        const tintColor = isRouteActive ? activeTintColor : inactiveTintColor
        return (
          <TouchableNativeFeedback
            key={routeIndex}
            style={Styles.tabButton}
            onPress={() => {
              onTabPress({ route })
            }}
            onLongPress={() => {
              onTabLongPress({ route })
            }}
            accessibilityLabel={getAccessibilityLabel({ route })}
          >
            {route.key == 'three' ? ( // 对特殊图标进行特殊处理
              <Scaler
                style={Styles.scalerOnline}
                pose={isRouteActive ? 'active' : 'inactive'}
              >
                {renderIcon({ route, focused: isRouteActive, tintColor })}
                <Text style={Styles.iconText}>{getLabelText({ route })}</Text>
              </Scaler>
            ) : ( // 普通图标普通处理
              <Scaler
                style={Styles.scaler}
                pose={isRouteActive ? 'active' : 'inactive'}
              >
                {renderIcon({ route, focused: isRouteActive, tintColor })}
                <Text style={Styles.iconText}>{getLabelText({ route })}</Text>
              </Scaler>
            )}
          </TouchableNativeFeedback>
        )
      })}
    </Scaler>
  )
}

const Styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: 53,
    borderWidth: 1,
    borderRadius: 1,
    borderColor: '#EEEEEE',
    shadowOffset: { width: 5, height: 10 },
    shadowOpacity: 0.75,
    elevation: 1
  },
  tabButton: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  spotLight: {
    width: tabWidth,
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center'
  },
  spotLightInner: {
    width: 48,
    height: 48,
    backgroundColor: '#ee0000',
    borderRadius: 24
  },
  scaler: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  scalerOnline: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  iconText: {
    fontSize: 12,
    lineHeight: 20
  }
})

export default TabBar
复制代码

最后实现的效果就是

如果你也有这样的需求,可以看看老外发布的那篇博客

Let's Create A Custom Animated Tab Bar With React Native

最后: 快要过年了,祝大家新年快乐

2017-09-28 14:07:00 weixin_30788731 阅读数 70

效果图:

2

一步一步慢慢来:

其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏。无奈又在忙其他事情,导致这些现在才整理出来。

u=1201501237,3797835182&fm=27&gp=0

1.顶部导航栏:react-native-scrollable-tab-view;文档地址:https://github.com/skv-headless/react-native-scrollable-tab-view

2.底部导航栏:react-navigation中的TabNavigator;文档地址:https://reactnavigation.org/docs/navigators/tab


3.一直想让index.android.js的代码简洁一些,苦思不得其解,直到现在才找到了一点“路径”,看这版的源代码:

index.android.js:

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

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

//顶部导航栏
import TopTabBar from './Views/TopTabBar';
//底部导航栏
import BottomTabBar from './Views/BottomTabBar';


export default class ywg extends Component {
  render() {
    return (
      <View style={{flex:1}}>
        <TopTabBar/>
        <BottomTabBar/>
      </View>    
    );
  }
}

AppRegistry.registerComponent('ywg', () => ywg);

bee0518dd21ff696b703bce9cd15c10c

怎样?够简单吧……对了,这样的代码看起来才比较“优雅”(容忍zheng小叶正儿八经的胡说八道哦~)而主要的代码就在

//顶部导航栏
import TopTabBar from './Views/TopTabBar';
//底部导航栏
import BottomTabBar from './Views/BottomTabBar';

这两个红色的文件中。

【重点注意】将两个Component同时使用的时候,一定要在最外层的View上定义样式,否则任你怎样摆弄,它们总是不会展现“庐山真面目”,具体的文档在:http://reactnative.cn/docs/0.46/layout-props.html

QQ截图20170928135412

这是项目文件路径。

BottomTabBar.js:

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

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

//底部导航栏
import { TabNavigator } from "react-navigation";

class Home extends React.Component {
  static navigationOptions = {
      tabBarLabel: '热点',
      tabBarIcon: ({ focused, tintColor }) => (
          <Image
              source={focused ? require('../Images/hot_hover.png') : require('../Images/hot.png')}
              style={{ width: 26, height: 26, tintColor: tintColor }}
          />
      )
  };
  render() {
      return (
          <View style={styles.container}>
              <Text>这是热点</Text>
          </View>
      );
  }
}   class Circle extends React.Component {
  static navigationOptions = {
      tabBarLabel: '圈子',
      tabBarIcon: ({ focused, tintColor }) => (
          <Image
              source={focused ? require('../Images/coterie_hover.png') : require('../Images/coterie.png')}
              style={{ width: 26, height: 26, tintColor: tintColor }}
          />
      )
  };
  render() {
      return (
          <View style={styles.container}>
              <Text>这是圈子内容</Text>
          </View>
      );
  }
}   class Tools extends React.Component {
  static navigationOptions = {
      tabBarLabel: '工具',
      tabBarIcon: ({ focused, tintColor }) => (
          <Image
              source={focused ? require('../Images/tool.png') : require('../Images/tool.png')}
              style={{ width: 26, height: 26, tintColor: tintColor }}
          />
      )
  };
  render() {
      return (
          <View style={styles.container}>
              <Text>这是工具内容</Text>
          </View>
      );
  }
}
class Mypage extends React.Component {
    static navigationOptions = {
      tabBarLabel: '我的',
      tabBarIcon: ({ focused, tintColor }) => (
        <Image
          source={focused ? require('../Images/my_hover.png') : require('../Images/my.png')}
          style={{ width: 26, height: 26, tintColor: tintColor }}
        />
      )
    };
    render() {
      return (
        <View style={styles.container}>
          <Text>这是我的内容</Text>
        </View>
      );
    }
}

const BottomTabBar = TabNavigator(
  {
    Home: {
      screen: Home,
    },
    Circle: {
      screen: Circle,
    },
    Tools: {
      screen: Tools,
    },
    Mypage: {
      screen: Mypage,
    },
  },
  {
    tabBarOptions: {
      activeTintColor: '#4BC1D2',
      inactiveTintColor: '#000',
      showIcon: true,
      showLabel: true,
      upperCaseLabel: false,
      pressColor: '#823453',
      pressOpacity: 0.8,
      style: {
        backgroundColor: '#fff',
        paddingBottom: 0,
        borderTopWidth: 0.5,
        borderTopColor: '#ccc',
      },
      labelStyle: {
        fontSize: 12,
        margin: 1
      },
      indicatorStyle: { height: 0 }, //android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了
    },
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    backBehavior: 'none',
  });

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  }
});

module.exports = BottomTabBar;

TopTabBar.js:

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

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import HomePage from '../Views/HomePage';
import PricePage from '../Views/PricePage';
import InventoryPage from '../Views/InventoryPage';

//顶部导航
var ScrollableTabView = require('react-native-scrollable-tab-view');


export default class TopTabBar extends Component {
  render() {
    return (
      <ScrollableTabView 
       tabBarUnderlineStyle={{backgroundColor:'#fff'}}
      >
        <HomePage tabLabel="首页" />
        <PricePage tabLabel="成交价" />
        <InventoryPage tabLabel="库存" />
      </ScrollableTabView>
    );
  }
}
module.exports = TopTabBar;

而关于这些的详细介绍可以参考这里(老大的小结):http://www.cnblogs.com/vipstone/p/7516115.html?utm_source=tuicool&utm_medium=referral

美中不足:

怎样才能实现顶部栏、底部栏控制各自部分功能呢?留下来的~~~

faedab64034f78f0f326463270310a55b2191cc5


PS:尴尬的事情猝不及防的发生了……

一直想不明白,顶部导航栏跟底部导航栏同时存在的情况下,怎样控制各自的功能呢?于是再请教完做手机开发的同事后才恍然大悟,原来自己想的顶部导航栏根本不是顶部导航栏,简言之就是自己把布局搞错了!明明只是有底部导航栏,而所谓的“顶部导航栏”也只是底部导航栏中的第一小部分里面嵌套着一个轮播组件,才会给人以错觉,啊啊啊……事实真相居然是这样的~

timg

转载于:https://www.cnblogs.com/zhengyeye/p/7606442.html