React Native(四)——顶部以及底部导航栏实现方式

React Native(四)——顶部以及底部导航栏实现方式

大家好,又见面了,我是全栈君。

效果图:

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108133.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java实现ajax_Ajax&Java

    java实现ajax_Ajax&JavaAJAX即“AsynchronousJavascriptAndXML”(异步JavaScript和XML)是一种基于浏览器的XMLHttpRequest对象实现的创建交互式网页应用的网页开发技术。用JS创建XMLHttpRequest对象并调用其方法实现基本的Ajax请求:xmlhttp=newXMLHttpRequest();//创建XMLHttpRequest对象…

  • Android DeepLink介绍与使用

    Android DeepLink介绍与使用前段时间公司让调研一下DeepLink,说以后会用到,之前看了很久,并做了个demo,现整理一下,方便以后查阅,如果有幸帮助到其他人就更好了。基本概念DeepLink,又叫deeplinking,中文翻译作深层链接。简单地从用户体验来讲,DeepLink,就是可以让你在手机的浏览器/GoogleSearch上点击搜索的结果,便能直接跳转到已安装的应用中的某一个页面的技术。对于不…

  • 用户访问路径分析_访问路径是什么意思

    用户访问路径分析_访问路径是什么意思1971年,在英国伦敦召开的国际园林艺术研讨会上,迪斯尼乐园的路径设计获得世界最佳设计奖。可是,你知道吗?这条路径却并非出自某个设计大师之手,完全是游人"自行设计"(实际就…

  • js 中的构造函数,构造函数作用,构造函数和普通函数的区别

    js 中的构造函数,构造函数作用,构造函数和普通函数的区别函数的定义方式:1.声明式函数定义:function函数名(){};这种定义方式,会将函数声明提升到该函数所在作用域的最开头,也是就无论你在这个函数的最小作用域的那儿使用这种方式声明的函数,在这个作用域内,你都可以调用这个函数为你所用。2.函数表达式:letfun=function(){};此方式定义的函数,只能在该作用域中,这段赋值代码执行之后才能通过fun()调用函数,否则,由于变量声明提升,fun===undefined。3.newFunction形式:varfun1

  • VS2010 中文版MSDN下载

    VS2010 中文版MSDN下载VS2010距发布已经有快两个月了,一直苦等的VS2010中文版终于出现了,灰太狼最近有点忙发现的还有点晚,现在马上提供给大家VS2010中文版的MSDN下载资源。VS2010中文版MSDN下载地址请访问:VS2010中文版MSDN下载转载于:https://www.cnblogs.com/rocky99261/archive/2010/06/03/1751003.html…

  • WebGame开发

    WebGame开发web策略类游戏开发(六)缓存概述 公布一个小webgame代码 webgame创意之《吞噬者》 webgame创意之《超时空要塞之边境》 webgame创意之《坐庄》 web策略类游戏开发(五)数据库表设计web策略类游戏开发(四)一个可以承载万人在线的架

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号