【搭建react-native项目框架】7.自定义头部导航

此节用到了第三方路由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.
                
            
        )
    }
}