1. 重构初始化、引入ts、stylus、mobx、antd-mobile、inversify

2. 登录页面及模态框

babel.config.js

 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
   plugins: [
+    ["import", { libraryName: "@ant-design/react-native" }],
     ["module-resolver", {
       "root": ["./app"],
       "extensions": [".js", ".jsx", ".ts", ".tsx", ".ios.js", ".android.js"]

package.json

@@ -8,13 +8,16 @@
     "test": "jest"
   },
   "dependencies": {
+    "@ant-design/react-native": "^4.1.0",
     "@babel/plugin-proposal-decorators": "^7.13.15",
     "@react-native-community/async-storage": "^1.12.1",
+    "babel-plugin-import": "^1.13.3",
     "inversify": "^5.0.5",
     "mobx": "^5.0.0",
     "mobx-persist": "^0.4.1",
     "mobx-react": "~6.0.0",
     "moment": "2.29.1",
+    "querystring": "^0.2.1",
     "ramda": "^0.27.1",
     "react": "16.8.3",
     "react-native": "0.59.9",

src/Router.tsx

@@ -9,8 +9,8 @@ import {
 import { font_family_regular, first_text_color } from './assets/styles/base'
 import Resolution from './components/common/Resolution'
 import Home from './pages/index'
-import Mine from './pages/Mine'
-import Signin from './pages/Signin'
+import Mine from './pages/mine/mine'
+import Signin from './pages/signin/signin'
 
 function createNavigator() {
   const options = {

src/assets/styles/base.styl

+@import './variable.styl'
+
+.container
+  flex 1
+
+.center
+  align-items center
+
+.middle
+  justify-content center
+
+.icon
+  resizeMode cover
+  width 100%
+  height 100%
+
+hToR($color, opacity = 1)
+  return rgba(red($color), green($color), blue($color), opacity)

src/assets/styles/variable.styl

+// 背景色
+primary_color = #007EFF // 主色
+foundation_color = #ffffff // 底色
+promary_shadow_color = #3CA2FF // 按钮阴影色
+home_background_color = #F7F7F7 // 背景色
+btn_sub_color = #0296F7 // 按钮色
+dis_sub_color = #BBBBBB // 禁用按钮色
+input_background_color = #efefef // 输入框底色
+
+// 字体色
+primary_text_color = #000000 // 主字颜色
+title_text_color = #ffffff // 标题颜色
+placehold_text_color = #919191 // input placeholder颜色
+first_text_color = #333333 // 一级字体
+second_text_color = #666666 // 次级字体
+third_text_color = #999999 // 三级字体
+point_color = #ff0000 // * 颜色
+text_default_color = #01B2B9 // 默认颜色
+text_audit_color = #FF0000 // 拒绝颜色
+text_return_color = #007EFF // 归还颜色
+text_other_color = #F4B61B // 其他颜色
+list_tit_color = rgba(0, 0, 0, 0.87) // 列表标题颜色
+list_str_color = #0CB4E8 // 列表加粗颜色
+list_one_color = #1B40B5 // 列表一级颜色
+list_thr_color = #3B4C82 // 列表其他颜色
+list_one_light_color = #3c64e2 // 列表一级较浅颜色
+// 字号
+first_text_size = 20px // 一级字号
+second_text_size = 16px // 二级字号
+third_text_size = 12px // 三级字号
+// 字体样式
+font_family_semibold = 'PingFangSC-Semibold'
+font_family_medium = 'PingFangSC-Medium'
+font_family_regular = 'PingFangSC-Regular'
+font_family_light = 'PingFangSC-Light'
+header_height = 58

src/components/common/Resolution.tsx

@@ -31,7 +31,6 @@ export default class Resolution {
 
     props.fw = { width: fwWidth, height: fwHeight, scale: fwScale, navHeight }
     props.fh = { width: fhWidth, height: fhHeight, scale: fhScale, navHeight }
-    console.log(props);
   }
 
   static FixWidthView(p) {

src/components/modals/base/base.styl

+.base
+  width 348px

src/components/modals/base/base.tsx

+import React, { Component } from 'react'
+import { Modal, Provider } from '@ant-design/react-native'
+import styles from './base.styl'
+
+export type IProps = {
+  visible: boolean
+  title: string
+  maskClosable: boolean
+  updateVisible: Function
+  footerButtons?: any[]
+}
+
+export default class BModal extends Component<IProps> {
+  constructor(props) {
+    super(props)
+  }
+
+  onShow(visible = true) {
+    this.props.updateVisible(visible)
+  }
+
+  onClose(visible = false) {
+    this.props.updateVisible(visible)
+  }
+
+  render() {
+    let { title, visible, footerButtons, maskClosable = false } = this.props
+    if (visible) {
+      return (
+        <Provider>
+          <Modal
+            title={title}
+            transparent={true}
+            onClose={() => {
+              this.onClose()
+            }}
+            maskClosable={maskClosable}
+            visible={visible}
+            footer={footerButtons}
+            style={styles.base}
+          >
+            {this.props.children}
+          </Modal>
+        </Provider>
+      )
+    } else {
+      return <></>
+    }
+  }
+}

src/components/modals/host/host.styl

+@import '../../../assets/styles/base.styl'
+@import '../../../assets/styles/variable.styl'
+
+.form
+  &-item
+    padding 15px 5px 15px 20px
+    margin 30px 10px 40px
+    border-radius 50px
+    flex-direction row
+    background-color rgba(239, 239, 239, 1)
+
+  &-label
+    width 55px
+    font-weight bold
+
+  &-input
+    flex 1

src/components/modals/host/host.tsx

+import React, { Component } from 'react'
+import { View, Text, TextInput, TouchableHighlight } from 'react-native'
+import { inject, observer } from 'mobx-react'
+import * as R from 'ramda'
+import BaseModal from '../base/base'
+import { placehold_text_color } from '../../../assets/styles/base'
+import { g } from '../../../utils/utils'
+import styles from './host.styl'
+
+export type IProps = {
+  visible: boolean
+  updateVisible: Function
+  store: {
+    host: string
+    setHost: Function
+  }
+}
+
+class HostModal extends Component<IProps> {
+  state = {
+    protocol: 'https',
+    domain: '',
+  }
+
+  footerBtns = [
+    {
+      text: '取消',
+      onPress: () => console.log('取消'),
+      style: g(styles, 'btn'),
+    },
+    {
+      text: '确定',
+      onPress: () => {
+        const { domain, protocol } = this.state
+        this.props.store.setHost(protocol + '://' + domain)
+      },
+      style: g(styles, 'btn'),
+    },
+  ]
+  constructor(props) {
+    super(props)
+    this.updateVisible = this.updateVisible.bind(this)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // 每次打开弹窗的时候,设置一下当前的host
+    if (!this.props.visible && nextProps.visible) {
+      this.getDomainValue()
+    }
+  }
+
+  /**
+   * 打开或关闭弹窗
+   * @param visible
+   */
+  updateVisible(visible: boolean) {
+    this.props.updateVisible && this.props.updateVisible(visible)
+  }
+
+  /**
+   * 获取域名
+   * @param host
+   */
+  getDomainValue() {
+    const { host } = this.props.store
+    let domain = R.split('://', host)
+    this.setState({ domain: domain[1] })
+  }
+
+  render() {
+    const { visible } = this.props
+    const { protocol, domain } = this.state
+
+    return (
+      <BaseModal
+        title="配置域名"
+        visible={visible}
+        updateVisible={this.updateVisible}
+        footerButtons={this.footerBtns}
+      >
+        <View style={g(styles, 'form-item')}>
+          <Text style={g(styles, 'form-label')}>{protocol}://</Text>
+          <TextInput
+            autoCapitalize="none"
+            placeholder="请输入要请求的域名"
+            placeholderTextColor={placehold_text_color}
+            returnKeyType="done"
+            style={g(styles, 'form-input')}
+            defaultValue={domain}
+            clearButtonMode="while-editing"
+            onChangeText={text => this.setState({ domain: text })}
+          ></TextInput>
+        </View>
+      </BaseModal>
+    )
+  }
+}
+
+export default inject('store')(observer(HostModal))

src/enums/index.ts

+export enum MsgType {
+  INFO,
+  WARN,
+  ERROR,
+  SUCCESS,
+}

src/inversify/index.ts

 import 'reflect-metadata'
 import { Container } from 'inversify'
 import { TYPES } from './types'
+import Service from '../services/service'
 import Store from '../stores/store'
+import System from '../stores/system'
+import User from '../stores/user'
 
 const container = new Container({ defaultScope: 'Singleton' })
 
+container.bind<Service>(TYPES.Service).to(Service)
 container.bind<Store>(TYPES.Store).to(Store)
+container.bind<System>(TYPES.SysStore).to(System)
+container.bind<User>(TYPES.UserStore).to(User)
 
 export default container

src/inversify/types.ts

 export const TYPES = {
+  Service: Symbol.for('service'),
   Store: Symbol.for('store'),
+  SysStore: Symbol.for('system'),
+  UserStore: Symbol.for('user'),
 }

src/pages/Signin.tsx

-import React, { Component } from 'react'
-import { View, Text, TouchableOpacity } from 'react-native'
-import Resolution from '../components/common/Resolution'
-
-class Signin extends Component {
-  render() {
-    return (
-      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-        <TouchableOpacity onPress={() => this.props.navigation.navigate('Main')}>
-          <Text style={{ fontSize: 18 }}>Signin Screen</Text>
-        </TouchableOpacity>
-      </View>
-    )
-  }
-}
-export default Signin

src/pages/index/index.tsx

@@ -8,8 +8,7 @@ import styles from './index.styl'
 
 type IProps = {
   store: {
-    count: number
-    inc: Function
+    token: string
   }
 }
 
@@ -17,37 +16,18 @@ class Index extends Component<IProps> {
   componentDidMount() {
     slashScreen.hide()
 
+    setTimeout(() => {
       const { navigation, store } = this.props
-    this.timer = setInterval(() => {
-      // store.inc()
-    }, 1000)
+      !store.token && navigation.navigate('Signin')
+    }, 0)
   }
 
-  componentWillUnmount() {
-    clearInterval(this.timer)
-  }
+  componentWillUnmount() {}
 
   render() {
     const { navigation, store } = this.props
-    return (
-      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-        <TouchableHighlight
-          onPress={() => {
-            navigation.navigate('Signin', {})
-          }}
-        >
-          <Text style={g(styles, ['index-text', 'index-bg'])}>count: {store.count}</Text>
-        </TouchableHighlight>
-
-        <TouchableHighlight
-          onPress={() => {
-            navigation.navigate('Signin', {})
-          }}
-        >
-          <Text style={{ fontSize: 18 }}>Home Screen Heloo</Text>
-        </TouchableHighlight>
-      </View>
-    )
+    console.log(store)
+    return <View style></View>
   }
 }
 

src/pages/signin/signin.styl

+@import '../../assets/styles/base.styl'
+@import '../../assets/styles/variable.styl'
+
+.container
+  flex 1
+
+.login
+  &-bg
+    position absolute
+    top 0
+    left 0
+    right 0
+    bottom 0
+
+  &-box
+    flex 1
+    justify-content center
+
+  &-title
+    position relative
+    padding-left 33px
+    margin-bottom 40px
+    padding-top 70px
+
+    &-decorator
+      width 30px
+      height 3px
+      background-color title_text_color
+      margin-top 14px
+
+    &-text
+      font-size 21px
+      font-family font_family_semibold
+      color title_text_color
+
+  &-card
+    width 348px
+    height 390px
+    border-radius 16px
+    background-color foundation_color
+    margin-bottom 50px
+    align-self center
+    padding 38px 30px
+
+    &__title
+      padding-bottom 23px
+
+      &-text
+        color primary_text_color
+        font-size 21px
+        font-family font_family_semibold
+
+    &__form-item
+      margin-bottom 23px
+      width 288px
+      height 45px
+      border-radius 100px
+      background-color rgba(239, 239, 239, 1)
+      padding-left 20px
+      padding-right 10px
+      justify-content center
+
+      &-input
+        font-size 14px
+
+    &__btns
+      margin-top 40px
+
+    &__btn
+      width 288px
+      height 45px
+      border-radius 100px
+      background btn_sub_color
+      @extend .middle
+      @extend .center
+
+      &-text
+        color title_text_color
+        font-size 21px
+        font-family font_family_regular
+
+      &-plain
+        align-items flex-end
+        margin-top 14px
+
+        &-text
+          color second_text_color
+          font-size 14px
+
+  &-footer
+    align-self center
+
+    &-version
+      text-align center
+      color home_background_color
+      font-size second_text_size
+      padding-top 5px
+      font-family font_family_semibold

src/pages/signin/signin.tsx

+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  SafeAreaView,
+  ImageBackground,
+  Image,
+  TextInput,
+} from 'react-native'
+import { inject, observer } from 'mobx-react'
+import debounce from 'lodash.debounce'
+import { placehold_text_color } from '../../assets/styles/base'
+import styles from './signin.styl'
+import { g, isBlank, show } from '../../utils/utils'
+import { MsgType } from '../../enums'
+import HostModal from '../../components/modals/host/host'
+
+type IProps = {
+  store: {
+    version: string
+    setHost: Function
+  }
+  userStore: {
+    username: string
+    password: string
+    signin: Function
+  }
+}
+
+/**
+ * 登录页面
+ */
+class Signin extends Component<IProps> {
+  state = {
+    username: '',
+    password: '',
+    visible: false,
+    loading: false,
+  }
+
+  constructor(props) {
+    super(props)
+    this.loginHandler = debounce(this.loginHandler.bind(this), 300)
+    this.updateVisible = this.updateVisible.bind(this)
+  }
+
+  componentDidMount() {
+    // 从刚开始的asyncStorage中获取东西要等一下
+    setTimeout(() => {
+      const { username, password } = this.props.userStore
+      this.setState({ username, password })
+    }, 500)
+  }
+
+  /**
+   * 登录
+   */
+  async loginHandler() {
+    const { username, password, loading } = this.state
+    const { navigation } = this.props
+    if (loading) return
+    if (isBlank(username)) return show('请输入您的用户名')
+    if (isBlank(password)) return show('请输入您的密码')
+
+    await this.props.userStore.signin(username, password)
+    navigation.navigate('Main')
+  }
+
+  /**
+   * 打开域名弹窗
+   * @param visible
+   */
+  updateVisible(visible: boolean) {
+    this.setState({ visible: visible })
+  }
+
+  render() {
+    const { store } = this.props
+    const { username, password, showPassword, visible } = this.state
+
+    return (
+      <View style={g(styles, 'container')}>
+        <SafeAreaView style={styles.container}>
+          <ImageBackground
+            resizeMode="cover"
+            source={require('../../../app/images/login_bg.png')}
+            style={g(styles, 'login-bg')}
+          >
+            <View style={g(styles, 'login-box')}>
+              <View style={g(styles, 'login-title')}>
+                <Text style={g(styles, 'login-title-text')}>骨科智慧仓</Text>
+                <View style={g(styles, 'login-title-decorator')}></View>
+              </View>
+
+              {/* 中间主逻辑部分 */}
+              <View style={g(styles, 'login-card')}>
+                <View style={g(styles, 'login-card__title')}>
+                  <Text style={g(styles, 'login-card__title-text')}>账号登陆</Text>
+                </View>
+                <View style={g(styles, 'login-card__form-item')}>
+                  <TextInput
+                    autoCapitalize="none"
+                    placeholder="请输入您的用户名"
+                    placeholderTextColor={placehold_text_color}
+                    returnKeyType="next"
+                    style={g(styles, 'login-card__form-item-input')}
+                    defaultValue={username}
+                    clearButtonMode="while-editing"
+                    onChangeText={text => this.setState({ username: text })}
+                  ></TextInput>
+                </View>
+                <View style={g(styles, 'login-card__form-item')}>
+                  <TextInput
+                    autoCapitalize="none"
+                    placeholder="请输入您的密码"
+                    placeholderTextColor={placehold_text_color}
+                    returnKeyType="done"
+                    style={g(styles, 'login-card__form-item-input')}
+                    defaultValue={password}
+                    secureTextEntry={!showPassword}
+                    clearButtonMode="while-editing"
+                    onChangeText={text => this.setState({ password: text })}
+                    // onFocus={() => this.setState({ focuOnPw: true })}
+                    // onBlur={() => this.setState({ focuOnPw: false })}
+                  />
+                  {/* {!!password && focuOnPw && (
+                    <TouchableWithoutFeedback
+                      onPress={() => this.setState({ showPassword: !showPassword })}
+                      style={styles.view_password_btn}
+                    >
+                      <Image
+                        source={require('../../images/eye.png')}
+                        style={styles.view_password}
+                      />
+                    </TouchableWithoutFeedback>
+                  )} */}
+                </View>
+
+                <View style={g(styles, 'login-card__btns')}>
+                  <TouchableOpacity
+                    style={g(styles, 'login-card__btn')}
+                    onPress={this.loginHandler}
+                    activeOpacity={0.8}
+                  >
+                    <Text style={g(styles, 'login-card__btn-text')}>登录</Text>
+                  </TouchableOpacity>
+
+                  <TouchableOpacity
+                    style={g(styles, 'login-card__btn-plain')}
+                    onPress={() => {
+                      this.updateVisible(true)
+                    }}
+                    activeOpacity={0.8}
+                  >
+                    <Text style={g(styles, 'login-card__btn-plain-text')}>修改域名</Text>
+                  </TouchableOpacity>
+                </View>
+              </View>
+
+              {/* 最后部分 */}
+              <View style={g(styles, 'login-footer')}>
+                <Image
+                  style={g(styles, 'login-footer-image')}
+                  source={require('../../../app/images/logo_foo.png')}
+                ></Image>
+                <Text style={g(styles, 'login-footer-version')}>v{store.version}</Text>
+              </View>
+            </View>
+          </ImageBackground>
+
+          {/* 域名弹窗 */}
+          <HostModal visible={visible} updateVisible={this.updateVisible} />
+        </SafeAreaView>
+      </View>
+    )
+  }
+}
+export default inject('store', 'userStore')(observer(Signin))

src/services/request.ts

+// @ts-nocheck
+import * as R from 'ramda'
+import { isBlank } from '../utils/utils'
+import { stringify } from 'querystring'
+import Store from '../stores/store'
+import container from '../inversify'
+import { TYPES } from '../inversify/types'
+import { transformObject } from '../utils/transform'
+
+interface RequestConfig {
+  url: string
+  method: string
+  data: any
+  headers: any
+}
+
+export const request = (args: Partial<RequestConfig>) => {
+  const store = container.get<Store>(TYPES.Store)
+
+  return new Promise((resolve, reject) => {
+    let options: any = {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      method: R.propOr('get', 'method', args),
+      reTries: R.propOr(3, 'reTries', args),
+      ...args,
+    }
+
+    options = R.cond([
+      [
+        R.propEq('method', 'get'),
+        R.applySpec({ url: () => args.url + '?' + stringify(args.data) }),
+      ],
+      [R.T, () => R.assoc('body', JSON.stringify(args.data), options)],
+    ])(options)
+
+    let requestTimes = 0
+    function doRequest() {
+      requestTimes += 1
+      console.log('请求URL:', store.host + options.url)
+      fetch(store.host + options.url, options)
+        .then(res => res.json())
+        .then(res => {
+          console.log('返回结果：', res)
+          R.ifElse(
+            fetchSuccess,
+            () => resolve(transformObject(res, 'toHump')),
+            () => {
+              throw res
+            },
+          )(res)
+        })
+        .catch(e => {
+          if (requestTimes <= options.reTries) {
+            return doRequest()
+          }
+          // TODO: 登录判断
+          // failHandler(e)
+          // throw e
+        })
+    }
+
+    doRequest()
+  })
+}
+
+const fetchSuccess = R.propEq('error_code', 0)
+
+const failHandler = async (err: any) => {
+  R.ifElse(
+    isBlank,
+    () => {
+      // Message.error(`${err.status} ${err.statusText}`)
+    },
+    () => {
+      // Message.error(`${err.code} ${err.msg}`)
+    },
+  )(err.code)
+}

src/services/service.ts

+import { request } from './request'
+import { injectable } from 'inversify'
+
+const ctx = '/api/latest'
+
+@injectable()
+export default class Service {
+  /**
+   * 获取系统配置
+   */
+  getSysProfile(data: any) {
+    return request({ url: `${ctx}/system/sys_profile/search`, data })
+  }
+
+  /**
+   * 登录
+   * @param data
+   * @returns
+   */
+  signin(data: { data: { user_name: string; user_password: string; grant_type: string } }) {
+    return request({
+      url: `${ctx}/access_token/password/search?app_code=MOBILE`,
+      data,
+      method: 'POST',
+    })
+  }
+}

src/stores/index.ts

@@ -4,6 +4,8 @@ import { AsyncStorage } from 'react-native'
 import { create } from 'mobx-persist'
 
 const store = container.get<any>(TYPES.Store)
+const sysStore = container.get<any>(TYPES.SysStore)
+const userStore = container.get<any>(TYPES.UserStore)
 
 const hydrate = create({
   storage: AsyncStorage,
@@ -12,5 +14,7 @@ const hydrate = create({
 })
 
 hydrate('store', store)
+hydrate('sysStore', sysStore)
+hydrate('userStore', userStore)
 
-export default { store }
+export default { store, sysStore, userStore }

src/stores/store.ts

-import { observable, action, reaction } from 'mobx'
+import { observable, action, runInAction } from 'mobx'
 import { persist } from 'mobx-persist'
 import { injectable } from 'inversify'
+import { NativeModules } from 'react-native'
+import container from '../inversify'
+import { TYPES } from '../inversify/types'
+import { IFunction } from 'bonehouse'
 
 @injectable()
 export default class Store {
-  @persist @observable count: number = 0
+  // 默认域名
+  @persist @observable host: string = 'https://obs.dev.xhk.guke.tech'
+
+  @persist @observable token?: string
+
+  @persist @observable version: string = '2.0.0'
+
+  // 功能模块
+  @persist('list') @observable funtions!: IFunction[]
 
   @action
-  inc() {
-    this.count = this.count + 1
+  setHost(host: string) {
+    this.host = host
+  }
+
+  @action
+  setToken(token: string) {
+    this.token = token
+  }
+
+  @action
+  setVersion(v: string) {
+    this.version = v
+  }
+
+  @action
+  setFunctions(funtions: IFunction[]) {
+    this.funtions = funtions
   }
 }
+
+runInAction(() => {
+  NativeModules.RNToolsManager.getAppVersion((v: string) => {
+    const store = container.get<Store>(TYPES.Store)
+    store.setVersion(v)
+  })
+})

src/stores/system.ts

+import { observable, action, flow } from 'mobx'
+import { persist } from 'mobx-persist'
+import { injectable } from 'inversify'
+
+@injectable()
+export default class System {
+}

src/stores/user.ts

+import { observable, action, flow, runInAction } from 'mobx'
+import { persist } from 'mobx-persist'
+import { injectable, inject } from 'inversify'
+import { TYPES } from '../inversify/types'
+import Service from '../services/service'
+import Store from './store'
+import { IDepartment, IInventory } from 'bonehouse'
+
+@injectable()
+export default class UserStore {
+  @inject(TYPES.Service)
+  service!: Service
+
+  @inject(TYPES.Store)
+  store!: Store
+
+  // 登录信息
+  @persist @observable private username: string = ''
+  @persist @observable private password: string = ''
+
+  // 用户信息
+  @persist @observable private userName: string = ''
+  @persist @observable private personName: string = ''
+  @persist @observable private gender: string = ''
+  @persist('map') @observable private department!: IDepartment
+
+  // 用户仓库
+  @persist('list') @observable inventories!: IInventory[]
+
+  @action
+  setUsername(username: string) {
+    this.username = username
+  }
+
+  @action
+  setPassword(password: string) {
+    this.password = password
+  }
+
+  /**
+   * 登录
+   */
+  signin = flow(function* (this: UserStore, username, password) {
+    const params = {
+      data: {
+        grant_type: 'PASSWORD',
+        user_name: username,
+        user_password: password,
+      },
+    }
+
+    const res = yield this.service.signin(params)
+    this.username = username
+    this.password = password
+
+    this.department = {
+      departmentCode: res.departmentCode,
+      departmentName: res.departmentName,
+    }
+    this.inventories = res.inventorys
+    this.userName = res.userName
+    this.personName = res.personName
+    this.store.setToken(res.accessToken)
+    this.store.setFunctions(res.functions)
+  })
+}

src/utils/transform.spec.ts

+import { transformObject, toHump, toLine } from './transform'
+
+describe('Object Transform Test', () => {
+  test('it should be underline', () => {
+    expect(toLine('aBBca23DefG')).toStrictEqual('a_b_bca23_def_g')
+  })
+})

src/utils/transform.ts

+import * as R from 'ramda'
+import { isBlank } from './utils'
+
+/**
+ * 下划线转换驼峰
+ * @param name
+ */
+export function toHump(name: string) {
+  return name.replace(/\_(\w)/g, function (all, letter) {
+    return letter.toUpperCase()
+  })
+}
+
+/**
+ * 驼峰转换下划线
+ * @param name string
+ * @returns
+ */
+export function toLine(name: string) {
+  return name.replace(/([A-Z])/g, '_$1').toLowerCase()
+}
+
+export type ITransformTypes = 'toHump' | 'toLine'
+export type ITransObj = { [key: string]: any } | any[]
+/**
+ * 对象下划线和驼峰转换
+ * @param obj 转换对象
+ * @param type string 'toHump'|'toLine' 转换类型
+ */
+export function transformObject(obj: ITransObj, type: ITransformTypes = 'toHump') {
+  if (isBlank(obj)) {
+    return null
+  }
+
+  const fn = type === 'toHump' ? toHump : toLine
+  const transform = (item: any) => {
+    const desc: ITransObj = {}
+    R.compose(
+      R.map((key: string) => {
+        const dKey = fn.call(null, key)
+        if (R.type(item[key]) === 'Array' || R.type(item[key]) === 'Object') {
+          desc[dKey] = isBlank(item[key]) ? item[key] : transformObject(item[key])
+        } else {
+          desc[dKey] = item[key]
+        }
+      }),
+      R.keys,
+    )(item)
+    return desc
+  }
+
+  let des
+  if (R.type(obj) === 'Array') {
+    des = R.map(transform)(obj as any)
+  } else {
+    des = transform(obj)
+  }
+  return des
+}

src/utils/utils.ts

 import * as R from 'ramda'
+import Toast from 'react-native-root-toast'
+import { MsgType } from '../enums'
 
 export const isBlank = R.anyPass([R.isNil, R.isEmpty])
 
@@ -20,10 +22,63 @@ export const getStyles = (styles: any, ...cls: any[]) => {
           return getStyles(styles, ...key)
         }
         return [styles[key]]
-      })
+      }),
     )(cls)
   }
   return clses
 }
 
+/**
+ * 样式对象辅助函数
+ * @param styles 样式
+ * @param cls 类名
+ * @returns 样式对象
+ */
 export const g = getStyles
+
+/**
+ * 提示框
+ * @param {*} data 提示内容
+ * @param {*} type 提示类型
+ */
+export const show = (data: string, type = MsgType.INFO, position = Toast.positions.CENTER) => {
+  if (isBlank(data)) return
+
+  const types = {
+    [MsgType.WARN]: {
+      textColor: '#fa8c16',
+      backColor: '#fff7e6',
+    },
+    [MsgType.ERROR]: {
+      textColor: '#f5222d',
+      backColor: '#fff1f0',
+    },
+    [MsgType.SUCCESS]: {
+      textColor: '#52c41a',
+      backColor: '#f6ffed',
+    },
+    [MsgType.INFO]: {
+      textColor: '#fafafa',
+      backColor: '#222',
+    },
+  }
+  const colors = types[type]
+  if (type === MsgType.ERROR) {
+    data = `× ${data}`
+  } else if (type === MsgType.WARN) {
+    data = `! ${data}`
+  } else if (type == MsgType.SUCCESS) {
+    data = `√ ${data}`
+  }
+  Toast.show(data, {
+    duration: Toast.durations.LONG,
+    position,
+    shadow: false,
+    hideOnPress: true,
+    delay: 0,
+    visible: true,
+    backgroundColor: colors.backColor,
+    textColor: colors.textColor,
+    shadowColor: colors.textColor,
+  })
+}

tsconfig.json

@@ -11,7 +11,9 @@
     "noEmit": true,
     "strict": true,
     "target": "esnext",
-    "rootDir": "."
+    "rootDir": ".",
+    "typeRoots": ["node_modules/@types", "types"]
   },
-  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
+  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"],
+  "include": ["src", "types"]
 }

types/index.d.ts

+/// <reference types="react" />
+
+declare module 'bonehouse' {
+  export type IDepartment = {
+    departmentCode: string
+    departmentName: string
+  }
+
+  export type IFunction = {
+    child_list: IFunction[]
+    function_code: string
+    function_name: string
+    function_order: number
+  }
+
+  export type IInventory = {
+    invCode: string
+    invName: string
+  }
+}

yarn.lock

@@ -2,6 +2,29 @@
 # yarn lockfile v1
 
 
+"@ant-design/icons-react-native@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.npm.taobao.org/@ant-design/icons-react-native/download/@ant-design/icons-react-native-2.2.1.tgz#0d21226fefa90471129dba864efb6c437627fb37"
+  integrity sha1-DSEib++pBHESnbqGTvtsQ3Yn+zc=
+
+"@ant-design/react-native@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.npm.taobao.org/@ant-design/react-native/download/@ant-design/react-native-4.1.0.tgz#9acc65552c19db5183d9731d50e8ffc1ba6b3608"
+  integrity sha1-msxlVSwZ21GD2XMdUOj/wbprNgg=
+  dependencies:
+    "@ant-design/icons-react-native" "^2.2.1"
+    "@bang88/react-native-drawer-layout" "^2.0.3"
+    "@bang88/react-native-ultimate-listview" "^3.3.4"
+    array-tree-filter "~2.1.0"
+    babel-runtime "^6.x"
+    deepmerge "^4.2.2"
+    normalize-css-color "^1.0.2"
+    react-native-collapsible "^1.5.2"
+    react-native-modal-popover "^0.0.12"
+    react-native-swipeout "^2.3.6"
+    shallowequal "^1.1.0"
+    utility-types "^3.10.0"
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13":
   version "7.12.13"
   resolved "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
@@ -779,6 +802,16 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@bang88/react-native-drawer-layout@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.npm.taobao.org/@bang88/react-native-drawer-layout/download/@bang88/react-native-drawer-layout-2.0.3.tgz#a93abd5a9c6d1fc4c0924a9f21c2cd7d1deea88d"
+  integrity sha1-qTq9WpxtH8TAkkqfIcLNfR3uqI0=
+
+"@bang88/react-native-ultimate-listview@^3.3.4":
+  version "3.3.4"
+  resolved "https://registry.npm.taobao.org/@bang88/react-native-ultimate-listview/download/@bang88/react-native-ultimate-listview-3.3.4.tgz#128828e64a7c1be1fd295ee25b5b07f323789d5d"
+  integrity sha1-Eogo5kp8G+H9KV7iW1sH8yN4nV0=
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.npm.taobao.org/@cnakazawa/watch/download/@cnakazawa/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1102,7 +1135,7 @@
   resolved "https://registry.npm.taobao.org/@types/node/download/@types/node-14.14.37.tgz?cache=0&sync_timestamp=1616803582959&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-14.14.37.tgz#a3dd8da4eb84a996c36e331df98d82abd76b516e"
   integrity sha1-o92NpOuEqZbDbjMd+Y2Cq9drUW4=
 
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.5.5":
   version "15.7.3"
   resolved "https://registry.npm.taobao.org/@types/prop-types/download/@types/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha1-KrDV2i5YFflLC51LldHl8kOrLKc=
@@ -1405,6 +1438,11 @@ array-slice@^0.2.3:
   resolved "https://registry.npm.taobao.org/array-slice/download/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
   integrity sha1-3Tz7gO15c6dRF82sabC5nshhhvU=
 
+array-tree-filter@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npm.taobao.org/array-tree-filter/download/array-tree-filter-2.1.0.tgz#873ac00fec83749f255ac8dd083814b4f6329190"
+  integrity sha1-hzrAD+yDdJ8lWsjdCDgUtPYykZA=
+
 array-unique@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npm.taobao.org/array-unique/download/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
@@ -1506,6 +1544,14 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-import@^1.13.3:
+  version "1.13.3"
+  resolved "https://registry.npm.taobao.org/babel-plugin-import/download/babel-plugin-import-1.13.3.tgz?cache=0&sync_timestamp=1606209944483&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-plugin-import%2Fdownload%2Fbabel-plugin-import-1.13.3.tgz#9dbbba7d1ac72bd412917a830d445e00941d26d7"
+  integrity sha1-nbu6fRrHK9QSkXqDDUReAJQdJtc=
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/runtime" "^7.0.0"
+
 babel-plugin-istanbul@^5.1.0:
   version "5.2.0"
   resolved "https://registry.npm.taobao.org/babel-plugin-istanbul/download/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
@@ -1604,6 +1650,14 @@ babel-preset-jest@^24.9.0:
     "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
     babel-plugin-jest-hoist "^24.9.0"
 
+babel-runtime@^6.x:
+  version "6.26.0"
+  resolved "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-runtime%2Fdownload%2Fbabel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -2097,7 +2151,7 @@ core-js-compat@^3.8.1:
     browserslist "^4.16.3"
     semver "7.0.0"
 
-core-js@^2.2.2, core-js@^2.4.1:
+core-js@^2.2.2, core-js@^2.4.0, core-js@^2.4.1:
   version "2.6.12"
   resolved "https://registry.npm.taobao.org/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1611040749668&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw=
@@ -2117,7 +2171,7 @@ cosmiconfig@^5.0.0, cosmiconfig@^5.0.5:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
-create-react-class@^15.6.2, create-react-class@^15.6.3:
+create-react-class@^15.6.0, create-react-class@^15.6.2, create-react-class@^15.6.3:
   version "15.7.0"
   resolved "https://registry.npm.taobao.org/create-react-class/download/create-react-class-15.7.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcreate-react-class%2Fdownload%2Fcreate-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
   integrity sha1-dJnXyi5pu1HRP69ZvQTwxlodbB4=
@@ -2290,6 +2344,11 @@ deep-is@~0.1.3:
   resolved "https://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=
+
 define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -5069,6 +5128,11 @@ node-releases@^1.1.70:
   resolved "https://registry.npm.taobao.org/node-releases/download/node-releases-1.1.71.tgz#cb1334b179896b1c89ecfdd4b725fb7bbdfc7dbb"
   integrity sha1-yxM0sXmJaxyJ7P3UtyX7e738fbs=
 
+normalize-css-color@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/normalize-css-color/download/normalize-css-color-1.0.2.tgz#02991e97cccec6623fe573afbbf0de6a1f3e9f8d"
+  integrity sha1-Apkel8zOxmI/5XOvu/Deah8+n40=
+
 normalize-package-data@^2.3.2:
   version "2.5.0"
   resolved "https://registry.npm.taobao.org/normalize-package-data/download/normalize-package-data-2.5.0.tgz?cache=0&sync_timestamp=1602547356577&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnormalize-package-data%2Fdownload%2Fnormalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -5648,11 +5712,23 @@ query-string@^6.4.2:
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
+querystring@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npm.taobao.org/querystring/download/querystring-0.2.1.tgz?cache=0&sync_timestamp=1613399913000&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fquerystring%2Fdownload%2Fquerystring-0.2.1.tgz#40d77615bb09d16902a85c3e38aa8b5ed761c2dd"
+  integrity sha1-QNd2FbsJ0WkCqFw+OKqLXtdhwt0=
+
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.npm.taobao.org/querystringify/download/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
   integrity sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=
 
+raf@^3.1.0:
+  version "3.4.1"
+  resolved "https://registry.npm.taobao.org/raf/download/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha1-B0LpmkplUvRF1z4+4DKK8P8e3jk=
+  dependencies:
+    performance-now "^2.1.0"
+
 ramda@^0.27.1:
   version "0.27.1"
   resolved "https://registry.npm.taobao.org/ramda/download/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
@@ -5740,6 +5816,13 @@ react-native-code-push@7.0.0:
     semver "^7.3.2"
     xcode "3.0.1"
 
+react-native-collapsible@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.npm.taobao.org/react-native-collapsible/download/react-native-collapsible-1.5.3.tgz#d6bc7274ae8f40f7688cca23ededa263e6c81c63"
+  integrity sha1-1rxydK6PQPdojMoj7e2iY+bIHGM=
+  dependencies:
+    prop-types "^15.6.2"
+
 react-native-date-picker@2.7.9:
   version "2.7.9"
   resolved "https://registry.npm.taobao.org/react-native-date-picker/download/react-native-date-picker-2.7.9.tgz#f662d8741a3f78148eccf492d70a1740b035024b"
@@ -5783,6 +5866,15 @@ react-native-image-zoom-viewer@3.0.1:
   dependencies:
     react-native-image-pan-zoom "^2.1.12"
 
+react-native-modal-popover@^0.0.12:
+  version "0.0.12"
+  resolved "https://registry.npm.taobao.org/react-native-modal-popover/download/react-native-modal-popover-0.0.12.tgz#5c0b5e9e0323490c3c5867821fc94b6582bfa3dc"
+  integrity sha1-XAtengMjSQw8WGeCH8lLZYK/o9w=
+  dependencies:
+    "@types/prop-types" "^15.5.5"
+    lodash.debounce "^4.0.8"
+    prop-types "^15.6.2"
+
 react-native-postcss-transformer@^1.2.4:
   version "1.2.4"
   resolved "https://registry.npm.taobao.org/react-native-postcss-transformer/download/react-native-postcss-transformer-1.2.4.tgz#3e1c9f1c0e36764a76516c5fd584e7f10c994014"
@@ -5849,6 +5941,15 @@ react-native-stylus-transformer@^1.2.0:
     css-to-react-native-transform "^1.8.1"
     semver "^5.6.0"
 
+react-native-swipeout@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.npm.taobao.org/react-native-swipeout/download/react-native-swipeout-2.3.6.tgz#47dac8a835825cf3f2eef9e495574a3d9ab6d3fa"
+  integrity sha1-R9rIqDWCXPPy7vnklVdKPZq20/o=
+  dependencies:
+    create-react-class "^15.6.0"
+    prop-types "^15.5.10"
+    react-tween-state "^0.1.5"
+
 react-native-tab-view@^1.2.0, react-native-tab-view@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npm.taobao.org/react-native-tab-view/download/react-native-tab-view-1.4.1.tgz?cache=0&sync_timestamp=1602059290475&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-native-tab-view%2Fdownload%2Freact-native-tab-view-1.4.1.tgz#f113cd87485808f0c991abec937f70fa380478b9"
@@ -5993,6 +6094,14 @@ react-transform-hmr@^1.0.4:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
+react-tween-state@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.npm.taobao.org/react-tween-state/download/react-tween-state-0.1.5.tgz#e98b066551efb93cb92dd1be14995c2e3deae339"
+  integrity sha1-6YsGZVHvuTy5LdG+FJlcLj3q4zk=
+  dependencies:
+    raf "^3.1.0"
+    tween-functions "^1.0.1"
+
 react@16.8.3:
   version "16.8.3"
   resolved "https://registry.npm.taobao.org/react/download/react-16.8.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact%2Fdownload%2Freact-16.8.3.tgz#c6f988a2ce895375de216edcfaedd6b9a76451d9"
@@ -6525,6 +6634,11 @@ setprototypeof@1.1.1:
   resolved "https://registry.npm.taobao.org/setprototypeof/download/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
   integrity sha1-fpWsskqpL1iF4KvvW6ExMw1K5oM=
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npm.taobao.org/shallowequal/download/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha1-GI1SHelbkIdAT9TctosT3wrk5/g=
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/shebang-command/download/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -7120,6 +7234,11 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+tween-functions@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.npm.taobao.org/tween-functions/download/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
+  integrity sha1-GuOlDnxguz3vd06scHrLynO7w/8=
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@@ -7272,6 +7391,11 @@ util.promisify@^1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.1"
 
+utility-types@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.npm.taobao.org/utility-types/download/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
+  integrity sha1-6kFI+adBAV8F7XT9YV4dIOa+2Cs=
+
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"