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. AcWing 875. 快速幂

    题目链接:https://www.acwing.com/problem/content/description/877/ 快速幂模板题,计算ab mod p 的值,a,b,p大概1e9左右,可以快速计 ...

  2. C++中操作符重载的概念

    1,下面的复数解决方案是否可行? 1,代码示例: class Comples { public: int a; int b; }; int main() { Complex c1 = {, }; Co ...

  3. spring boot配置分页插件

    在springboot中使用PageHelper插件有两种较为相似的方式,接下来我就将这两种方式进行总结. 方式一:使用原生的PageHelper 1.在pom.xml中引入依赖 <depend ...

  4. 工作笔记20170315-------关于FAQ(Frequently Asked Questions)列表的代码

    源自于:http://www.17sucai.com/pins/3288.html (1)FAQ问答列表点击展开收缩文字列表 <ul>   <li class="clear ...

  5. activemq高可用

    这里是基于 zookeeper 选举方式实现的集群配置,服务器过半数才可提供服务,所以是2n+1台这里以三台为例. 只有master节点能提供服务,slave节点无法提供服务,只有当master节点挂 ...

  6. GridView做加

    原文:http://www.cnblogs.com/insus/archive/2012/09/22/2697862.html 下面是Insus.NET实现演示: CObj.cs代码: using S ...

  7. SPSS Statistics 26.0 下载安装和激活

    目录 1. 其他版本 2. IBM SPSS Statistics 26 新增功能 3. 安装步骤 4. 下载地址 1. 其他版本 参考:https://www.cnblogs.com/coco56/ ...

  8. 202-基于TI DSP TMS320C6678、Xilinx K7 FPGA XC7K325T的高速数据处理核心板

    该DSP+FPGA高速信号采集处理板由我公司自主研发,包含一片TI DSP TMS320C6678和一片Xilinx FPGA K7 XC72K325T-1ffg900.包含1个千兆网口,1个FMC ...

  9. Array 和 ArrayList 、 List 以及 LinkedList 的区别

    下面列出了Array(数组)和ArrayList(集合)的不同点: Array可以包含基本类型和对象类型,ArrayList只能包含对象类型. Array大小是固定的,ArrayList的大小是动态变 ...

  10. 细数不懂Spring底层原理带来的伤与痛

    原文链接:https://www.jianshu.com/p/c9de414221ac?utm_campaign=haruki&utm_content=note&utm_medium= ...