搭建react-native項目框架之自定義頭部導航

此節(jié)用到了第三方路由react-native-router-flux，關于集成路由請移步《【搭建react-native項目框架】3.集成第三方路由和tab頁》。

1.在components內添加header.js文件

import?React,?{?Component?}?from?'react';
import?{
????Platform,
????StyleSheet,
????TouchableOpacity,
????View,
????Text,
????Image,
}?from?'react-native';
//第三方插件
import?{?Actions?}?from?'react-native-router-flux';
//自定義組件
import?Common?from?'./common';?//公共類

export?default?class?Header?extends?Component?{
????constructor(props){
????????super(props);
????}

????render()?{
????????let?statusBar?=?Platform.select({
????????????ios:?Common.isIphoneX???44?:?20,
????????????android:?0,
????????});

????????return?(返回{this.props.title}{this.props.doneText})
????}
}

const?styles?=?StyleSheet.create({
????header:?{
????????backgroundColor:?'#ffffff',
????????width:?Common.autoScaleSize(750),
????????flexDirection:?'row',
????????justifyContent:?'space-between',
????????alignItems:?'center',
????????borderBottomWidth:?Common.autoScaleSize(1),
????????borderBottomColor:?'#cdcdcd',
????},
????title:?{
????????color:?'#2c2c2c',
????????height:?Common.autoScaleSize(42),
????????lineHeight:?Common.autoScaleSize(42),
????????fontSize:?Common.autoFontSize(38),
????},
????return:?{
????????width:?Common.autoScaleSize(200),
????????height:?Common.autoScaleSize(36),
????????marginLeft:?Common.autoScaleSize(24),
????????flexDirection:?'row',
????????justifyContent:?'flex-start',
????????alignItems:?'center',
????},
????done:?{
????????width:?Common.autoScaleSize(200),
????????height:?Common.autoScaleSize(36),
????????marginRight:?Common.autoScaleSize(24),
????????flexDirection:?'row',
????????justifyContent:?'flex-end',
????????alignItems:?'center',
????},
????returnBox:?{
????????flexDirection:?'row',
????????justifyContent:?'flex-start',
????????alignItems:?'center',
????},
????headerReturnIcon:?{
????????width:?Common.autoScaleSize(36),
????????height:?Common.autoScaleSize(36),
????},
????headerReturnText:?{
????????color:?'#2c2c2c',
????????height:?Common.autoScaleSize(36),
????????lineHeight:?Common.autoScaleSize(36),
????????fontSize:?Common.autoFontSize(32),
????},
????doneBox:?{
????????flexDirection:?'row',
????????justifyContent:?'flex-end',
????????alignItems:?'center',
????},
????headerDoneIcon:?{
????????width:?Common.autoScaleSize(36),
????????height:?Common.autoScaleSize(36),
????},
????headerDoneText:?{
????????color:?'#2c2c2c',
????????height:?Common.autoScaleSize(36),
????????lineHeight:?Common.autoScaleSize(36),
????????fontSize:?Common.autoFontSize(32),
????},
});

2.在views/home下新建topShow.js文件

import?React,?{?Component?}?from?'react';
import?{
????//?Platform,
????StyleSheet,
????View,
????Text,
}?from?'react-native';
//第三方插件
import?{?Actions?}?from?'react-native-router-flux';
//自定義組件
import?Common?from?'../../components/common';?//公共類
import?Header?from?'../../components/header';?//頭部導航

export?default?class?TopShowScreen?extends?Component?{
????constructor(props){
????????super(props);
????}

????render()?{
????????return?(this?is?TopShowScreen.)
????}
}