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

大家好，今天讲一下如何实现自定义标题栏组件，我们都知道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',  }, });