1.导航栏

units/utils/common/NavigationBar.js

@@ -0,0 +1,144 @@
+import React,{Component} from 'react'
+import {ViewPropTypes,StyleSheet,Text,View,StatusBar,Platform,DeviceInfo} from 'react-native'
+import {PropTypes}  from 'prop-types'
+
+const NAV_BAR_HEIGHT_IOS = 44;
+const NAV_BAR_HEIGHT_ANDROID = 50;
+const STATUS_BAR_HEIGHT = DeviceInfo.isIPhoneX_deprecated ? 0:20;
+
+const StatusBarShape = {//设置状态栏所接受的属性
+
+    barStyle:PropTypes.oneOf(['light-content','default']),
+    hidden:PropTypes.bool,
+    backgroundColor:PropTypes.string,
+
+};
+
+export default  class NavigationBar extends Component{
+
+    //提供属性的类型检查
+    static propTypes = {
+
+        style:ViewPropTypes.style,
+        title:PropTypes.string,
+        titleView:PropTypes.element,
+        titleLayoutStyle:ViewPropTypes.style,
+        hide:PropTypes.bool,
+        statusBar:PropTypes.shape(StatusBarShape),
+        leftButton:PropTypes.element,
+        rightButton:PropTypes.element,
+
+    };
+
+    //设置默认属性
+    static defaultProps = {
+
+        statusBar:{
+
+            barStyle:'light-content',
+            hidden:false,
+
+        },
+
+    };
+
+
+    render() {
+
+        let statusBar = !this.props.statusBar.hidden ?
+            (<View style={styles.statusBar_bar}>
+
+                <StatusBar {...this.props.statusBar} />
+
+            </View>):null;
+
+        let titleView = this.props.titleView ?
+            this.props.titleView:(<Text ellipsizeMode="head" numberOfLines={1} style={styles.statusBar_title}>{this.props.title}</Text>);
+
+
+        let content = this.props.hide?null:
+            (<View  style={styles.statusBar_navBar}>
+
+                {this.getButtonElement(this.props.leftButton)}
+
+                <View style={[styles.statusBar_navBarTitleContainer,this.props.titleLayoutStyle]}>
+
+                    {titleView}
+
+                </View>
+
+                {this.getButtonElement(this.props.rightButton)}
+
+            </View>);
+
+
+        return (<View  style={[styles.container,this.props.style]}>
+
+            {statusBar}
+            {content}
+
+        </View>)
+
+    }
+
+
+    getButtonElement(data){
+
+
+        return (<View   style={styles.navBarButton}>
+
+            {data ? data : null}
+
+        </View>)
+
+
+    }
+
+}
+
+const styles = StyleSheet.create({
+
+    container:{
+
+        backgroundColor:'#2196f3',
+
+    },
+    statusBar_bar:{
+
+        height:Platform.OS==='ios'?STATUS_BAR_HEIGHT:0,
+
+    },
+
+    statusBar_title:{
+        fontSize:18,
+        color:'white',
+
+    },
+
+    statusBar_navBar:{
+
+        flexDirection:'row',
+        alignItems: 'center',
+        justifyContent:'space-between',
+        height:Platform.OS === 'ios'?NAV_BAR_HEIGHT_IOS:NAV_BAR_HEIGHT_ANDROID,
+
+    },
+    statusBar_navBarTitleContainer:{
+
+        alignItems:'center',
+        justifyContent: 'center',
+        position:'absolute',
+        left:40,
+        right:40,
+        top:0,
+        bottom:0,
+
+
+    },
+    navBarButton:{
+
+        alignItems:'center',
+
+    },
+
+});

units/utils/components/navigator/NavigationUtil.js

@@ -0,0 +1,43 @@
+export  default class  NavigationUtil{
+    /*
+    * 跳转到指定页面
+    * params 要传递的参数
+    * page 跳转的页面
+    * */
+    static goPage(params,page){
+
+        const  navigation = NavigationUtil.navigation;
+
+        if (!navigation) {
+
+            console.log('navigation can not be null');
+
+            alert('navigation can not be null');
+
+            return;
+
+
+        }
+        navigation.navigate(
+
+            page,
+            {
+
+                ...params
+
+            }
+
+        )
+
+
+    };
+
+
+    static goBack(navigation){
+
+        navigation.goBack();
+
+
+    }
+
+}