navbar 和首页

App.tsx

@@ -16,7 +16,7 @@ import CodePush from 'react-native-code-push'
 
 // 重构后版本, 计划从2.0.0开始
 import { Provider } from 'mobx-react'
-import Router from './src/Router'
+import Router from './src/router'
 import stores from './src/stores'
 
 // 字体不随系统字体变化 首字母不大写

package.json

@@ -13,7 +13,7 @@
     "@react-native-community/async-storage": "^1.12.1",
     "babel-plugin-import": "^1.13.3",
     "inversify": "^5.0.5",
-    "mobx": "^5.0.0",
+    "mobx": "^5.7.0",
     "mobx-persist": "^0.4.1",
     "mobx-react": "~6.0.0",
     "moment": "2.29.1",

src/assets/styles/base.styl

@@ -3,6 +3,9 @@
 .container
   flex 1
 
+.row
+  flex-direction row
+
 .center
   align-items center
 

src/components/common/Resolution.tsx

@@ -3,6 +3,9 @@ import { Dimensions, Platform, PixelRatio, StatusBar, View, ScrollView } from 'r
 
 let props = {}
 
+/**
+ * UI兼容类，把最外层的的组件使用这个类包起来，后续开发可以直接使用设计稿去开发
+ */
 export default class Resolution {
   static get(useFixWidth = true) {
     return usefixWidth ? { ...props.fw } : { ...props.fh }

src/components/header/header.styl

+@import '../../assets/styles/base.styl'
+@import '../../assets/styles/variable.styl'
+
+.header
+  background primary_color
+
+  &-bar
+    height header_height
+    padding 0 20px
+    @extend .row
+    @extend .center
+
+  &-back
+    @extend .row
+    @extend .center
+    @extend .middle
+
+    &__img
+      width 20px
+      height @width
+      margin-top 1px
+
+    &__text
+      color title_text_color
+      font-size first_text_size
+      font-family font_family_regular
+
+  &-title
+    flex 1
+    color title_text_color
+    font-size first_text_size
+    font-family font_family_regular
+    text-align center
+
+  &-right
+    width 60px

src/components/header/header.tsx

+import React, { useState, useEffect } from 'react'
+import { View, StatusBar, Platform, Text, Image, TouchableOpacity } from 'react-native'
+import { g, isIphoneX } from '../../utils/utils'
+import { primary_color } from '../../assets/styles/base'
+import styles from './header.styl'
+
+function header({ title, backgroundColor = primary_color, back = true, backCallback = () => {} }) {
+  const [statusHeight, setStatusHeight] = useState(20)
+
+  useEffect(() => {
+    const height = Platform.OS === 'android' ? StatusBar.currentHeight : isIphoneX() ? 44 : 20
+    setStatusHeight(height)
+  }, [])
+
+  return (
+    <View style={g(styles, 'header')}>
+      {/* 状态栏 */}
+      <View style={{ backgroundColor, height: statusHeight }}>
+        <StatusBar barStyle="dark-content" backgroundColor={backgroundColor} />
+      </View>
+
+      {/* 标题栏 */}
+      <View style={g(styles, 'header-bar')}>
+        {/* 返回按钮 */}
+        {!!back && (
+          <TouchableOpacity style={g(styles, 'header-back')} activeOpacity={0.6}>
+            <Image
+              style={g(styles, 'header-back__img')}
+              source={require('../../assets/images/back.png')}
+            />
+            <Text style={g(styles, 'header-back__text')}>返回</Text>
+          </TouchableOpacity>
+        )}
+        <Text style={g(styles, 'header-title')}>{title}</Text>
+
+        {/* 右边 */}
+        {!!back && <View style={g(styles, 'header-right')}></View>}
+      </View>
+    </View>
+  )
+}
+
+export default header

src/constants.ts

+// 业务模块
+export const MOBILE_BUSINESS_MODULE = 'MOBILE_BUSINESS_MODULE'
+// 历史订单
+export const MOBILE_HISTORICAL_ORDER = 'MOBILE_HISTORICAL_ORDER'
+// 硬件管理
+export const MOBILE_HARDWARE_MANAGEMENT = 'MOBILE_HARDWARE_MANAGEMENT'

src/pages/index/index.styl

+@import '../../assets/styles/base.styl'
+@import '../../assets/styles/variable.styl'
+
 .index
-  &-text
-    font-size 18px
+  flex 1
+  background home_background_color
+
+.biz
+  flex 1
 
-  &-bg
-    background-color #f00
+  &-view
+    flex-wrap wrap
+    flex-direction row
+    justify-content space-between
+    padding 40px
+
+  &-box
+    width 150px
+    height @width
+    border-radius 5px
+    background-color rgba(255, 255, 255, 1)
+    margin-bottom 40px
+    @extend .middle
+    @extend .center
+
+  &-name
+    color first_text_color
+    font-size 18px
+    font-family font_family_regular
+    padding-top 10px

src/pages/index/index.tsx

 import React, { Component } from 'react'
-import { View, Text, TouchableHighlight } from 'react-native'
+import { View, Text, TouchableOpacity, Image, ScrollView } from 'react-native'
 import slashScreen from 'react-native-splash-screen'
 import { observer, inject } from 'mobx-react'
+import { IFunction } from 'bonehouse'
 import Resolution from '../../components/common/Resolution'
+import Header from '../../components/header/header'
 import { g } from '../../utils/utils'
 import styles from './index.styl'
 
 type IProps = {
   store: {
     token: string
+    getBizFuns: Function
+    functionIcons: any[]
   }
 }
 
@@ -22,12 +26,35 @@ class Index extends Component<IProps> {
     }, 0)
   }
 
-  componentWillUnmount() {}
-
   render() {
     const { navigation, store } = this.props
-    console.log(store)
-    return <View style></View>
+    const funs = store.getBizFuns()
+
+    return (
+      <View style={styles.index}>
+        <Header title="骨科智慧仓" back={false} />
+
+        <ScrollView style={g(styles, 'biz')}>
+          <View style={g(styles, 'biz-view')}>
+            {funs.map(fun => {
+              return (
+                <TouchableOpacity
+                  key={fun.functionCode}
+                  style={g(styles, 'biz-box')}
+                  activeOpacity={0.6}
+                >
+                  <Image
+                    style={g(styles, 'biz-icon')}
+                    source={store.functionIcons[fun.functionCode]}
+                  />
+                  <Text style={g(styles, 'biz-name')}>{fun.functionName}</Text>
+                </TouchableOpacity>
+              )
+            })}
+          </View>
+        </ScrollView>
+      </View>
+    )
   }
 }
 

src/pages/mine/mine.tsx

 import React, { Component } from 'react'
 import { View, Text } from 'react-native'
+import Header from '../../components/header/header'
 
 class Mine extends Component {
   render() {
     return (
-      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-        <Text style={{ fontSize: 18 }}>Mine Screen</Text>
+      <View style>
+        <Header title="骨科智慧仓" />
       </View>
     )
   }

src/stores/store.ts

-import { observable, action, runInAction } from 'mobx'
+import { observable, action, runInAction, computed, decorate, toJS } from 'mobx'
 import { persist } from 'mobx-persist'
 import { injectable } from 'inversify'
 import { NativeModules } from 'react-native'
+import { IFunction } from 'bonehouse'
+import * as R from 'ramda'
+import { isBlank } from '../utils/utils'
 import container from '../inversify'
 import { TYPES } from '../inversify/types'
-import { IFunction } from 'bonehouse'
+import { MOBILE_BUSINESS_MODULE } from '../constants'
 
 @injectable()
 export default class Store {
@@ -16,7 +19,32 @@ export default class Store {
   @persist @observable version: string = '2.0.0'
 
   // 功能模块
-  @persist('list') @observable funtions!: IFunction[]
+  @persist('list') @observable functions: IFunction[] = []
+
+  @observable functionIcons = {
+    MOBILE_BORROW_ORDER: require('../assets/images/quick_order.png'),
+    MOBILE_SELF_HELP_ORDER: require('../assets/images/self_order.png'),
+    MOBILE_CONSUMP_CONFIRMA: require('../assets/images/equip_consu.png'),
+    MOBILE_DEVICE_INFORMATION: require('../assets/images/device_info.png'),
+    MOBILE_TRANSFER_APPLICATION: require('../assets/images/trans_order.png'),
+  }
+
+  /**
+   * 首页功能列表
+   * @returns IFunction[]
+   */
+  getBizFuns(): IFunction[] {
+    let funcs = toJS(this.functions)
+    if (isBlank(funcs)) {
+      return []
+    }
+
+    return R.compose(
+      R.sort(R.ascend(R.prop('functionOrder'))),
+      R.propOr([], 'childList'),
+      R.find(R.propEq('functionCode', MOBILE_BUSINESS_MODULE)),
+    )(funcs as any) as any
+  }
 
   @action
   setHost(host: string) {
@@ -34,8 +62,8 @@ export default class Store {
   }
 
   @action
-  setFunctions(funtions: IFunction[]) {
-    this.funtions = funtions
+  setFunctions(functions: IFunction[]) {
+    this.functions = functions
   }
 }
 

src/stores/user.ts

@@ -22,10 +22,13 @@ export default class UserStore {
   @persist @observable private userName: string = ''
   @persist @observable private personName: string = ''
   @persist @observable private gender: string = ''
-  @persist('map') @observable private department!: IDepartment
+  @persist('map') @observable private department: IDepartment = {
+    departmentName: '',
+    departmentCode: ''
+  }
 
   // 用户仓库
-  @persist('list') @observable inventories!: IInventory[]
+  @persist('list') @observable inventories: IInventory[] = []
 
   @action
   setUsername(username: string) {

src/utils/utils.ts

 import * as R from 'ramda'
+import { Dimensions, Platform } from 'react-native'
 import Toast from 'react-native-root-toast'
 import { MsgType } from '../enums'
 
@@ -82,3 +83,26 @@ export const show = (data: string, type = MsgType.INFO, position = Toast.positio
     shadowColor: colors.textColor,
   })
 }
+
+const X_WIDTH = 375
+const X_HEIGHT = 812
+const X_MAX_WIDTH = 414
+const X_MAX_HEIGHT = 896
+const XS_MAX_WIDTH = 428
+const XS_MAX_HEIGHT = 926
+
+const screenW = Dimensions.get('window').width
+const screenH = Dimensions.get('window').height
+
+/**
+ * 判断是否iPhone x，是否有刘海
+ * @returns boolean
+ */
+export const isIphoneX = (): boolean => {
+  return (
+    Platform.OS === 'ios' &&
+    ((screenH === X_HEIGHT && screenW === X_WIDTH) ||
+      (screenH === X_MAX_HEIGHT && screenW === X_MAX_WIDTH) ||
+      (screenH === XS_MAX_HEIGHT && screenW === XS_MAX_WIDTH))
+  )
+}

yarn.lock

@@ -4996,7 +4996,7 @@ mobx-react@~6.0.0:
   dependencies:
     mobx-react-lite "1.4.0"
 
-mobx@^5.0.0:
+mobx@^5.7.0:
   version "5.15.7"
   resolved "https://registry.npm.taobao.org/mobx/download/mobx-5.15.7.tgz?cache=0&sync_timestamp=1618063126574&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmobx%2Fdownload%2Fmobx-5.15.7.tgz#b9a5f2b6251f5d96980d13c78e9b5d8d4ce22665"
   integrity sha1-uaXytiUfXZaYDRPHjptdjUziJmU=