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
Appjs; type Props = {};<Props> { serverEnvcurrentEnv = 'test'; configHeader; httpClient; } { return <Provider rootStore=store> <View style=stylescontainer> <StatusBar barStyle='light-content' translucent=true backgroundColor='transparent'/> <AppContainer screenProps= statusBarHeight:StatusBarcurrentHeight ref= { NavigatorPush; }/> </View> </Provider> ; } TestPagejs;;;; @NavigatorBarContainer@observer { const navigatorStore = thisprops; navigatorStore; navigatorStore; } { console; }; { 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系列,适配导航条。