1.自定义导航栏样式

步骤一:从效果图中可以看出,导航栏的样式都差不多,因为我们前面已经设置了 Navigator ,这边的话我们还需要自定义 Navigator 的样式,可以看到所有的 Navigator 样式都是相近的,所以这边我们就抽出来,让所有的 Navigator 共用一个组件就可以了。

步骤二:那么首先我们在 main 文件夹中创建 GDCommunalNavBar 文件并初始化一下里面基本的内容

步骤三:接着,我们来看下首页的导航栏,首页导航栏分别有左中右三个按钮,左边为半小时热门,中间为点击下拉显示支持筛选的平台的列表,右边则是商品搜索,通常 Navigator 也只有这3个组件,为了使用者高度地自定义,这边我们只在 currencyNavBar 中设置3个组件的布局,然后提供接口,获取外部传入的值,并在内部判断是否需要创建相应的组件。

GDCommunalNavBar.js

/**
* 自定义导航栏
*/
import React, { Component, PropTypes } from 'react';
import {
StyleSheet,
Text,
View,
Dimensions,
Platform,
} from 'react-native'; // 获取屏幕宽高
const {width, height} = Dimensions.get('window'); export default class GDCommunalNavBar extends Component {
// 创建成员属性 ES6统一用static管理
static propTypes = {
leftItem:PropTypes.func, // 外部传入方法,内部接收
titleItem:PropTypes.func,
rightItem:PropTypes.func,
}; // 左边
renderLeftItem() {
// 判断是否传入值
if (this.props.leftItem === undefined) return;
// 有值,调用方法,进行初始化
return this.props.leftItem();
} // 中间
renderTitleItem() {
if (this.props.titleItem === undefined) return;
return this.props.titleItem();
} // 右边
renderRightItem() {
if (this.props.rightItem === undefined) return;
return this.props.rightItem();
} render() {
return (
<View style={styles.container}>
{/* 左边 */}
<View>
{this.renderLeftItem()}
</View>
{/* 中间 */}
<View>
{this.renderTitleItem()}
</View>
{/* 右边 */}
<View>
{this.renderRightItem()}
</View>
</View>
);
}
} const styles = StyleSheet.create({
container: {
width:width,
height:Platform.OS === 'ios' ? 64 : 44,
backgroundColor:'white',
flexDirection:'row', // 设置主轴的方向
justifyContent:'space-between', // 设置主轴的对齐方式
alignItems:'center', // 设置侧轴内容居中
borderBottomWidth:0.5,
borderBottomColor:'gray',
paddingTop:Platform.OS === 'ios' ? 15 : 0,
},
});

2.引用 自定义导航栏组件

GDHome.js

/**
* 首页
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Image,
} from 'react-native'; // 引入自定义导航栏组件
import CommunalNavBar from '../main/GDCommunalNavBar'; export default class GDHome extends Component { // 返回左边按钮
renderLeftItem() {
// 将组件返回出去
return(
<TouchableOpacity>
<Image source={{uri:'hot_icon_20x20'}} style={styles.navbarLeftItemStyle} />
</TouchableOpacity>
);
} // 返回中间按钮
renderTitleItem() {
return(
<TouchableOpacity>
<Image source={{uri:'navtitle_home_down_66x20'}} style={styles.navbarTitleItemStyle} />
</TouchableOpacity>
);
} // 返回右边按钮
renderRightItem() {
return(
<TouchableOpacity>
<Image source={{uri:'search_icon_20x20'}} style={styles.navbarRightItemStyle} />
</TouchableOpacity>
);
} render() {
return (
<View style={styles.container}>
{/* 导航栏样式 */}
<CommunalNavBar
leftItem = {() => this.renderLeftItem()}
titleItem = {() => this.renderTitleItem()}
rightItem = {() => this.renderRightItem()}
/>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
navbarLeftItemStyle: {
width:20,
height:20,
marginLeft:15,
},
navbarTitleItemStyle: {
width:66,
height:20,
},
navbarRightItemStyle: {
width:20,
height:20,
marginRight:15,
},
});

3.效果图

.

React-Native 之 GD (二)自定义共用导航栏样式的更多相关文章

  1. 【React Native 实战】二维码扫描

    1.前言今天介绍React Native来实现二维码扫描的功能.首先我们要借助第三方插件react-native-barcode-scanner-universal来实现跨平台二维码扫描. 2.介绍 ...

  2. React Native组件解析(二)之Text

    React Native组件解析(二)之Text 1. 概述 Text组件对应于iOS的UILabel,Android的TextView,用来显示文本.但是Text组件的内部使用的并不是flexbox ...

  3. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

  4. React Navigation 导航栏样式调整+底部角标消息提示

    五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...

  5. 微信小程序------导航栏样式、tabBar导航栏

    一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...

  6. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

  7. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  8. 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)

    ),请不要反复加群! 欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该DrawerLayoutAndroid组件封 ...

  9. React Native学习(二)—— 开始一个项目

    本文基于React Native 0.52 一.创建一个项目 1.初始化一个RN项目 react-native init RNDemo 2.连接一个设备或是打开模拟器 可以通过 adb devices ...

随机推荐

  1. 【7.24校内交流赛】T1&T2

    T1: 一个脑洞很大的题,将输入的所有数异或起来输出就好了: (话说我为什么这么喜欢用异或啊) #include<bits/stdc++.h> using namespace std; i ...

  2. 线性表源码分享(c++),包含顺序表、单链表、循环链表、双向链表

    ---恢复内容开始--- 我是一个c++和数据结构的初学者,本文主要是把清华大学出版社的数据结构(用面向对象方法与c++语言描述)(第2版)这本书中第二章线性表的源码抄下来,在学习的过程中有助于加深印 ...

  3. RabbitMq学习1-介绍、安装和配置

    一.简介 1.MQ框架非常之多,比较流行的有RabbitMq.ActiveMq.ZeroMq.kafka,以及阿里开源的RocketMQ       2.AMQP是消息队列的一个协议. 3.Rabbi ...

  4. 思维体操: HDU1022Train Problem I

    Train Problem I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  5. angularJS(一):表达式、指令

    简介 以 JavaScript 编写的库,是一个 JavaScript 框架 一.表达式 AngularJS 使用 表达式 把数据绑定到 HTML. 表达式写在双大括号内:{{ expression ...

  6. MATLAB图像的代数运算

    1.图像旋转与缩放 bm=imread("3.png"); %subplot(1,3,1); imshow(bm); %缩放图片 %bt=imresize(bm,0.5,'near ...

  7. 防抖&节流

    使用的原因 在前端开发当中有一部分的用户行为会频繁操作触发事件执行,而对于DOM操作,资源加载等耗费性能的处理,很可能导致页面卡顿,甚至浏览器崩溃,函数节流和防抖就是解决类似需求应运而生的 节流 预定 ...

  8. ffmpeg 常用命令汇总

    最近工作常用到ffmpeg 做一些视频数据的处理转换等,用来做测试,今天总结了一下,并参考了网上一些部分朋友的经验,一起在这里汇总了一下,有需要的朋友可以收藏测试一下,有问题可以回帖交流. 1.ffm ...

  9. 18.Linux-CentOS系统根目录空间使用率100%问题?

    问题描述:发现服务器根目录爆满100%? 排查步骤:1.先检查文件索引节点iNode使用率情况,[root@localhost ~]# df -hTi2.查看无用文件是否居多:[root@localh ...

  10. macos升级Nodejs和Npm到最新版

    第一步,先查看本机node.js版本: node -v 第二步,清除node.js的cache: sudo npm cache clean -f 第三步,安装 n 工具,这个工具是专门用来管理node ...