React Native自定义标题栏组件的实现方法

2024-11-27 09:36:41

大家好，今天讲一下如何实现自定义标题栏组件，我们都知道RN有一个优点就是可以组件化，在需要使用该组件的地方直接引用并传递一些参数就可以了，这种方式确实提高了开发效率。

标题栏是大多数应用界面必不可少的一部分，将标题栏剥离出来做成一个组件很有必要。今天先讲一个不带返回按钮的标题栏。废话少说，直接上代码:

/**
 * 封装公共的标题头，没有返回按钮
 */
'use strict';
import React, { Component } from 'react';
import {
 Text,
 View,
}
from 'react-native';
import StyleSheet from 'StyleSheet';
export default class HeaderNoBack extends Component {
 render() {
  return (
    <View style={styles.container}>
     <View style={styles.textview}>
      <Text style={styles.textstyle}>{this.props.text || "标题头"}</Text>
     </View>
    </View>
  );
 }
}
const styles = StyleSheet.create({
 container: {
  flexDirection: 'row',
  alignItems: 'center',
  height: 45,
  alignSelf: 'stretch',
  backgroundColor: '#4a9df8',
 },
 textview: {
  flex: 1,
  alignSelf: 'center',
 },
 textstyle: {
  fontSize: 18,
  color: '#fff',
  textAlign: 'center',
 },
});

代码比较简单，这里就做过多的分析了，但是着重说一点，this.props.text这里是显示传入进来的要显示的文本，如果没有传入text属性，则默认显示"标题头"。

使用方法示例:

import HeaderNoBack from '../../../component/Header/HeaderNoBack';
<HeaderNoBack text='我是标题'/>

以上代码主要用到了View和Text组件，样式使用了flex布局，有不了解felx布局的可以看下阮一峰的一篇文章:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

当然，网上资料很多，也可以自己搜索，上面只是代码示例，在实际项目中要根据自己的情况进行修改。

好了，今天先讲到这里，后面部分会讲解带返回按钮的标题栏的实现。

以上所述是小编给大家介绍的React Native自定义标题栏组件的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

ReactNative页面跳转实例代码

效果图如下所示: 进入工作目录,运行 react-native init NavigatorProject 创建项目NavigatorProject import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableHighlight, Image, Navigator } from 'react-native'; class navigatorProject exte
深入浅析react native es6语法

react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率解构赋值 var { StyleSheet,Text,View } = React; 这句代码是ES6 中新增的解构(Destructuring)赋值语句.准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量. 上面的代码等价于: var StyleSheet = React.StyleSheet; var Text = React.Text; var View = React.View 再看几个例子,以前
Android原生嵌入React Native详解

1.首先集成的项目目录我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的. 我们init完项目之后,项目初始化完成了,这时候我们可以用命令react-native run-android直接运行项目,至于怎么调试,之前已经说过. 说一下我们怎么开发和运行分开吧,我们开发一般会选择webstrom,开发后我们会Android和ios的编译分开. 启动npm 下面说一下android
ReactNative-JS 调用原生方法实例代码

第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule package com.mixture; import android.content.Context; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule
Windows下React Native的Android环境部署及布局示例

搭建基础环境 JDK(必须,不解释) SDK(建议使用Android Studio,集成SDK以及模拟器) genymotion(如果是使用真机或者Android Studio自带的模拟器,可以选择不装) NVM(node版本控制器,需要node4.0以上版本) 以上配置不是必须,可自行选择适合自己的环境,部分安装过程可能会涉及到翻墙,需要配置代理配置踩坑记录 genymotion 这里选择genymotion模拟器来讲解,也会提一下Android Studio自带的模拟器的一些注意点,使用真
React Native实现简单的登录功能(推荐)

React Native 简介: React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验.React Native 把重点放在所有开发人员关心的平台的开发效率上
React Native自定义标题栏组件的实现方法

大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi
React Native 图片查看组件的方法

React Native 图片查看组件:react-native-image-viewer,纯JS组件,小巧快速的图标查看组件.支持图片放大缩小,支持图片加载失败设置替代图片,支持将图片保存到本地等功能. 效果图安装方法 npm i react-native-image-zoom-viewer --save 使用示例 const images = [ { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', },
React Native悬浮按钮组件的示例代码

React Native悬浮按钮组件:react-native-action-button,纯JS组件,支持安卓和IOS双平台,支持设置子按钮,支持自定义位置和样式和图标. 效果图安装方法 npm i react-native-action-button --save react-native link react-native-vector-icons 因为用到了react-native-vector-icons图标组件,需要做下link.如果你项目中已经使用了react-native-ve
React Native日期时间选择组件的示例代码

React Native日期时间选择组件:react-native-datepicker,支持安卓和IOS双平台,支持单独选择日期.单独选择时间和选择日期和时间,支持自定义日期格式. 效果图安装方法 npm install react-native-datepicker --save 示例代码 <Text style={styles.instructions}>time: {this.state.time}</Text> <DatePicker style={{width:
React Native自定义路由管理的深入理解

目录 1.自定义路由 2.Tab导航 3.数据回传总结 1.自定义路由众所周知,不管是在原生Android还是iOS,它们都有一个默认的路由路由栈管理类.由于React Native官方没有提供路由管理的组件,所以我们需要使用react-navigation插件提供的Stack.Navigator组件来管理路由. Stack.Navigator使用的命名路由,所谓命名路由,指的是路由需要先声明然后才能使用.为了方便管理路由页面,我们会将路由放到一个统一的位置,比如screens包下,如下所示
React Native 截屏组件的示例代码

React Native 截屏组件:react-native-view-shot,可以截取当前屏幕或者按照当前页面的组件来选择截取,如当前页面有一个图片组件,一个View组件,可以选择截取图片组件或者View组件.支持iOS和安卓. 安装方法 npm install react-native-view-shot react-native link react-native-view-shot 使用示例 captureScreen() 截屏方法截取当前屏幕,跟系统自带的截图一致,只会截取当前屏幕
React Native 自定义下拉刷新上拉加载的列表的示例

在移动端开发中列表页是非常常见的页面,在React Native中我们一般使用FlatList或SectionList组件实现这些列表视图.通常列表页都会有大量的数据需要加载显示,这时候就用到了分页加载,因此对于列表组件来说,实现下拉刷新和上拉加载在很多情况下是必不可少的. 本篇文章基于FlatList封装一个支持下拉刷新和上拉加载的RefreshListView,对原始的FlatList进行封装之后,再调用上拉和下拉刷新就十分方便了. 下拉刷新的实现十分简单,这里我们沿用FlatList本身的
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法.分享给大家供大家参考,具体如下: 1.Scroll View ScrollView是React Native提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下: 滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量. horizontal={bool},属性为true时,所有子视图在水平方向排列,否则在纵向排列.默认为
React Native自定义Android的SSL证书链校验

目录前言 HTTPS请求 WebSocket 前言虽然这次分享的内容解决了本人的实际开发需求,但由于不是专职的Android开发工程师,涉及到的Android相关内容可能会存在错误或者写法不合理,仅供参考,请多多指教. 本文示例基于: React Native - 0.67.3 Android - 10+ 不包括iOS 由于业务原因,需要在生产环境里面使用自签发证书,那自然这个证书是无法通过Android证书链验证的,为此需要自定义校验规则. 本文分为两部分,介绍了对HTTPS请求和WebS
深入理解React中es6创建组件this的方法

首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

React Native自定义标题栏组件的实现方法

相关推荐

随机推荐