react-native-navigatorBar

Installation

npm install --save react-native-navigation-zbar or yarn add react-native-navigation-zbar

react-native link react-native-device-info

Demo

App.js
import { NavigatorPush } from 'react-navigation-props-helper';

type Props = {};
export default class App extends Component<Props> {
    componentWillMount() {
        serverEnv.currentEnv = 'test';
        configHeader.setHeaders({test:'value'});

        httpClient.requestAction({method:'POST',server:'tms',apiUrl:'test/url'}, (data) => {
            console.log('callback', data);
        });
    }
    render() {
        return (
            <Provider rootStore={store}>
                <View style={styles.container}>
                    <StatusBar barStyle={'light-content'} translucent={true} backgroundColor={'transparent'}/>
                    <AppContainer screenProps={{ statusBarHeight:StatusBar.currentHeight }} ref={navigatorRef => { NavigatorPush.setTopLevelNavigator(navigatorRef); }}/>
                </View>
            </Provider>
        );
    }
}

TestPage.js
import React,{ Component } from 'react';
import { View } from 'react-native';
import { observer } from 'mobx-react';
import { NavigatorBarContainer } from 'react-native-navigation-zbar';

@NavigatorBarContainer
@observer
export default class TestPage extends Component {
    componentDidMount() {
        const { navigatorStore } = this.props;
        navigatorStore.setNavigatorBar({
            title:'动态设置导航条标题',
            rightViews:[{ text:'提交',onClick:this.onClick,id:'就是打酱油的' }],
            style:{ backgroundColor:'blue' }
        });

        navigatorStore.setParameters({ rightDisable:true });
    }

    onClick = (id) => {
        console.log(id);
    };

    render() {
        return(
            <View style={{flex:1}}>

            </View>
        );
    }
}

注意事项

1、封装的高阶组件NavigatorBarContainer基于mobx，项目需依赖mobx、mobx-react组件；

2、此组件用于自定义react-navigation的导航条，因此需隐藏react-navigation自带的导航条，如

const defaultOptions = {
    //默认样式
    gesturesEnabled:true,
    header:null
};

3、支持自定义视图backView（返回按钮）、centerView（标题）、rightViews（右上角按钮）。

4、DeviceUtils，二次封装react-native-device-info，用于判断设备是否iPhoneX系列，适配导航条。