【搭建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 (
            <View style={[styles.header, {margin: 0, paddingTop: statusBar, height: statusBar + 44}]}>
                <TouchableOpacity onPress={Actions.pop} underlayColor="transparent" style={[styles.return]}>
                    <View style={[styles.returnBox]}>
                        <Image
                            source={require('../resources/images/return.png')}
                            style={[styles.headerReturnIcon]}
                        />
                        <Text style={[styles.headerReturnText]}>返回</Text>
                    </View>
                </TouchableOpacity>
                <Text style={[styles.title]}>
                    {this.props.title}
                </Text>
                <TouchableOpacity onPress={Actions.topShow} underlayColor="transparent" style={[styles.done]}>
                    <View style={[styles.doneBox]}>
                        <Text style={[styles.headerDoneText]}>{this.props.doneText}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

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 (
            <View style={[global.styles.screen]}>
                <Header title={"内容页"} doneText={"完成"} style={[styles.header]} />
                <Text style={[global.styles.text]}>
                    this is TopShowScreen.
                </Text>
            </View>
        )
    }
}