React Native学习教程之自定义NavigationBar详解

React Native是一款基于React构建的移动端应用开发框架，其使用JavaScript语言，可以快速开发出高性能、原生APP体验的应用程序。本文主要介绍如何在React Native中自定义NavigationBar，实现更加个性化的界面设计。

一、NavigationBar介绍

NavigationBar是指界面最上面一条横向的通用栏目，包括了标题、左侧按钮、右侧按钮等内容。在React Native中，我们可以使用自带的Navigator组件来实现NavigationBar的添加、修改和删除等操作。

二、如何在React Native中自定义NavigationBar

1. 增加自定义NavigationBar

可以通过Navigator组件中的 navigationBar 属性来实现自定义NavigationBar，使用 Navigator.SceneConfigs.PushFromRight 动画效果时，可以设置navigationBar的相关样式。例如：

<Navigator 
    initialRoute={{name: 'Home', component: Home}} 
    renderScene={this.renderScene.bind(this)}
    configureScene={() => Navigator.SceneConfigs.PushFromRight}
    navigationBar={
        <Navigator.NavigationBar 
            style={{backgroundColor:'#3B5998'}}
            routeMapper={this.navigationBarRouteMapper()} />
    } 
/>

其中， navigationBarRouteMapper() 函数用来定义NavigationBar的三个部分: Title、LeftButton 和 RightButton，如下所示：

navigationBarRouteMapper() {
    return {
        LeftButton: function(route, navigator, index, navState) {
            return (
                <View style={{flex:1, justifyContent: 'center'}}>
                    <Text 
                        style={{color: 'white', margin: 10}}
                        onPress={() => navigator.pop()}>
                        返回
                    </Text>
                </View>
            );
        },
        Title: function(route, navigator, index, navState) {
            return (
                <View style={{flex:1, justifyContent: 'center'}}>
                    <Text style={{color: 'white', fontSize: 16, fontWeight: 'bold'}}>
                        {route.name}
                    </Text>
                </View>
            );
        },
        RightButton: function(route, navigator, index, navState) {
            return (
                <View style={{flex:1, justifyContent: 'center'}}>
                    <Text 
                        style={{color: 'white', margin: 10}}
                        onPress={() => navigator.push({name: 'Page2', component: Page2})}>
                        下一页
                    </Text>
                </View>
            );
        }
    };
},

示例中实现的NavigationBar包括了返回按钮、标题和下一页按钮三个部分，代码可以根据实际需求进行修改。

2. 修改NavigationBar样式

可以在 navigationBar 的 style 属性下设置样式，例如：

navigationBar={
    <Navigator.NavigationBar 
        routeMapper={this.navigationBarRouteMapper()}
        style={{backgroundColor: 'red', height: 100, paddingTop: 20}}
    />
}

其中，可以通过 height 属性设置NavigationBar的高度，通过 paddingTop 属性设置上边距，达到自定义NavigationBar的效果。

三、总结

通过本文的介绍，我们了解了React Native中自定义NavigationBar的方法和样式修改，可以根据实际需求进行更加灵活的设计。在项目实践中，可以根据业务逻辑增加NavigationBar按钮等元素，增强应用的用户体验。

示例

下面附上一个完整的自定义NavigationBar的示例代码，在示例中增加了一个NavigationBar右侧按钮的点击事件，展示了NavigationBar的完整实现：

import React, { Component } from 'react';
import {
    AppRegistry,
    View,
    Text,
    Navigator,
    StyleSheet,
} from 'react-native';

class Home extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>Home</Text>
            </View>
        );
    }
}

class Page2 extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>Page2</Text>
            </View>
        );
    }
}

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '首页',
        }
    }

    _onRightButtonPress() {
        this.setState({title: '当前选中：Page2'});
    }

    navigationBarRouteMapper() {
        return {
            LeftButton: function(route, navigator, index, navState) {
                return (
                    <View style={{flex:1, justifyContent: 'center'}}>
                        <Text 
                            style={{color: 'white', margin: 10}}
                            onPress={() => navigator.pop()}>
                            返回
                        </Text>
                    </View>
                );
            },
            Title: function(route, navigator, index, navState) {
                return (
                    <View style={{flex:1, justifyContent: 'center'}}>
                        <Text style={{color: 'white', fontSize: 16, fontWeight: 'bold'}}>
                            {this.state.title}
                        </Text>
                    </View>
                );
            }.bind(this),
            RightButton: function(route, navigator, index, navState) {
                return (
                    <View style={{flex:1, justifyContent: 'center'}}>
                        <Text 
                            style={{color: 'white', margin: 10}}
                            onPress={() => this._onRightButtonPress()}>
                            下一页
                        </Text>
                    </View>
                );
            }.bind(this),
        };
    }

    renderScene(route, navigator) {
        let Component = route.component;
        return (
            <View style={{flex:1}}>
                <Component navigator={navigator} route={route} />
            </View>
        );
    }

    render() {
        return (
            <Navigator 
                initialRoute={{name: 'Home', component: Home}} 
                renderScene={this.renderScene.bind(this)}
                configureScene={() => Navigator.SceneConfigs.PushFromRight}
                navigationBar={
                    <Navigator.NavigationBar 
                        style={{backgroundColor:'#3B5998'}}
                        routeMapper={this.navigationBarRouteMapper()} />
                } 
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1, 
        justifyContent: 'center', 
        alignItems: 'center', 
        backgroundColor: 'white'
    },
    btn: {
        margin: 10, 
        padding: 10, 
        backgroundColor: 'red'
    },
    title: {
        fontSize: 20, 
        fontWeight: 'bold'
    },
});

AppRegistry.registerComponent('Example', () => Example);

以上是一个包含了左侧返回按钮、中间标题和右侧下一页按钮的完整示例，你也可以在其基础上进行自定义NavigationBar的改造。