React-native-hxenavigationbar NPM

react-native-hxenavigationbar

搜狐《狐小e》轻应用React Native默认导航栏组件。

react-native-hxenavigationbar

安装方法：

$ npm i react-native-hxenavigationbar --save

OBJECT参数说明：

参数	类型	必填	说明
navigation	Object	是	屏幕导航属性
title	String	是	标题
backgroundColor	String	否	导航栏背景色的RGBA色彩空间
whiteTint	Boolean	否	导航栏文字和图标的色调，true为白色调，false为黑色调
backButtonHandler	Function	是	点击返回按钮的回调
leftButton	Object	否	左按钮对象(BUTTON OBJECT)
rightButton	Object	否	右按钮对象(BUTTON OBJECT)
customButton	Object	否	自定义按钮对象(BUTTON OBJECT)

如果backgroundColor值无效，将采用默认导航栏样式。whiteTint仅在backgroundColor有值时有效，且如果whiteTint值无效，将会根据backgroundColor值自动设置

BUTTON OBJECT参数说明：

参数	类型	必填	说明
item	String, Number, Object	是	按钮内容，具体分为“文本标题”（String，如：`'按钮标题'`）、“本地图片”（Number，如：`require('./image.png')`）、“图片资源”（Object，如：`{uri: 'http://www.image.com/image.png'}`）
handler	Function	是	点击按钮的回调

导航栏按钮从左至右依次为“返回按钮”、“左按钮”、“右按钮”、“自定义按钮”

示例代码：

import hxeNavigationBar from 'react-native-hxenavigationbar'

static navigationOptions = ({navigation}) => {
    return new hxeNavigationBar({
        navigation: navigation,
        title: '页面标题',
        backgroundColor: 'D65946CC',
        whiteTint: true,
        backButtonHandler: () => {
            console.log('点击了返回按钮');
        },
        leftButton: {
            item: '按钮标题',
            handler: () => {
                console.log('点击了左按钮');
            }
        },
        rightButton: {
            item: require('./image.png'),
            handler: () => {
                console.log('点击了右按钮');
            }
        },
        customButton: {
            item: {uri: 'http://www.image.com/image.png'},
            handler: () => {
                console.log('点击了自定义按钮');
            }
        }
    });
};

通过Navigation的setParams方法，修改hxeNavigationBarConfig可以动态改变导航栏

this.props.navigation.setParams({
    'hxeNavigationBarConfig': {
        navigation: this.props.navigation,
        title: '新页面标题',
        backButtonHandler: () => {
            console.log('又点击了返回按钮');
        }
    }
});