添加mobx、Inversify

App.tsx

@@ -7,16 +7,17 @@
  */
 import React, { Component } from 'react'
 import { Text, TextInput, View } from 'react-native'
-import { Provider } from 'react-redux'
 import CodePush from 'react-native-code-push'
-import configureStore from './app/store/configureStore'
 // 旧版本,之前的版本用这个打包
+// import { Provider } from 'react-redux'
+// import configureStore from './app/store/configureStore'
 // import Router from './app/Router'
+// const store = configureStore()
 
 // 重构后版本, 计划从2.0.0开始
+import { Provider } from 'mobx-react'
 import Router from './src/Router'
-
-const store = configureStore()
+import stores from './src/stores'
 
 // 字体不随系统字体变化 首字母不大写
 Text.defaultProps = Object.assign({}, Text.defaultProps, { allowFontScaling: false })
@@ -77,7 +78,7 @@ class App extends Component {
 
   render() {
     return (
-      <Provider store={store}>
+      <Provider {...stores}>
         <Router />
       </Provider>
     )

babel.config.js

@@ -5,6 +5,7 @@ module.exports = {
       "root": ["./app"],
       "extensions": [".js", ".jsx", ".ts", ".tsx", ".ios.js", ".android.js"]
     }],
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
     "@babel/plugin-transform-runtime",
   ]
 };

metro.config.js

@@ -5,13 +5,24 @@
  * @format
  */
 
-module.exports = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: false,
-      },
-    }),
-  },
-};
+const { getDefaultConfig } = require('metro-config')
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts },
+  } = await getDefaultConfig()
+  return {
+    transformer: {
+      babelTransformerPath: require.resolve('react-native-stylus-transformer'),
+      getTransformOptions: async () => ({
+        transform: {
+          experimentalImportSupport: false,
+          inlineRequires: false,
+        },
+      }),
+    },
+    resolver: {
+      sourceExts: [...sourceExts, 'styl'],
+    },
+  }
+})()

package.json

@@ -8,7 +8,12 @@
     "test": "jest"
   },
   "dependencies": {
-    "@types/ramda": "^0.27.39",
+    "@babel/plugin-proposal-decorators": "^7.13.15",
+    "@react-native-community/async-storage": "^1.12.1",
+    "inversify": "^5.0.5",
+    "mobx": "^5.0.0",
+    "mobx-persist": "^0.4.1",
+    "mobx-react": "~6.0.0",
     "moment": "2.29.1",
     "ramda": "^0.27.1",
     "react": "16.8.3",
@@ -29,6 +34,7 @@
     "redux": "4.0.1",
     "redux-persist": "5.10.0",
     "redux-thunk": "2.3.0",
+    "reflect-metadata": "^0.1.13",
     "rn-fetch-blob": "0.12.0"
   },
   "devDependencies": {
@@ -36,6 +42,7 @@
     "@babel/plugin-transform-runtime": "^7.13.10",
     "@babel/runtime": "^7.4.5",
     "@types/jest": "^26.0.22",
+    "@types/ramda": "^0.27.39",
     "@types/react": "^17.0.3",
     "@types/react-native": "^0.64.2",
     "@types/react-test-renderer": "^17.0.1",
@@ -45,6 +52,7 @@
     "jetifier": "^1.6.6",
     "metro-react-native-babel-preset": "^0.65.2",
     "react-native-gesture-handler": "^1.10.3",
+    "react-native-postcss-transformer": "^1.2.4",
     "react-native-stylus-transformer": "^1.2.0",
     "react-test-renderer": "16.8.3",
     "stylus": "^0.54.8",

src/Router.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-navigation'
 import { font_family_regular, first_text_color } from './assets/styles/base'
 import Resolution from './components/common/Resolution'
-import Home from './pages/Home'
+import Home from './pages/index'
 import Mine from './pages/Mine'
 import Signin from './pages/Signin'
 

src/inversify/index.ts

+import 'reflect-metadata'
+import { Container } from 'inversify'
+import { TYPES } from './types'
+import Store from '../stores/store'
+
+const container = new Container({ defaultScope: 'Singleton' })
+
+container.bind<Store>(TYPES.Store).to(Store)
+
+export default container

src/inversify/types.ts

+export const TYPES = {
+  Store: Symbol.for('store'),
+}

src/pages/index/index.styl

+.index
+  &-text
+    font-size 18px
+
+  &-bg
+    background-color #f00

src/pages/Home.tsx → src/pages/index/index.tsx

 import React, { Component } from 'react'
 import { View, Text, TouchableHighlight } from 'react-native'
 import slashScreen from 'react-native-splash-screen'
-import Resolution from '../components/common/Resolution'
+import { observer, inject } from 'mobx-react'
+import Resolution from '../../components/common/Resolution'
+import { g } from '../../utils/utils'
+import styles from './index.styl'
 
-class Home extends Component {
+type IProps = {
+  store: {
+    count: number
+    inc: Function
+  }
+}
+
+class Index extends Component<IProps> {
   componentDidMount() {
     slashScreen.hide()
-    const { navigation } = this.props
-    // if (true) {
-    //   navigation.navigate('Signin')
-    // }
+
+    const { navigation, store } = this.props
+    this.timer = setInterval(() => {
+      // store.inc()
+    }, 1000)
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer)
   }
 
   render() {
-    const { navigation } = this.props
+    const { navigation, store } = this.props
     return (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <TouchableHighlight
@@ -21,17 +36,19 @@ class Home extends Component {
             navigation.navigate('Signin', {})
           }}
         >
-          <Text style={{ fontSize: 18 }}>Home Screen</Text>
+          <Text style={g(styles, ['index-text', 'index-bg'])}>count: {store.count}</Text>
         </TouchableHighlight>
+
         <TouchableHighlight
           onPress={() => {
             navigation.navigate('Signin', {})
           }}
         >
-          <Text style={{ fontSize: 18 }}>Home Screen</Text>
+          <Text style={{ fontSize: 18 }}>Home Screen Heloo</Text>
         </TouchableHighlight>
       </View>
     )
   }
 }
-export default Home
+
+export default inject('store')(observer(Index))

src/stores/index.ts

+import container from '../inversify'
+import { TYPES } from '../inversify/types'
+import { AsyncStorage } from 'react-native'
+import { create } from 'mobx-persist'
+
+const store = container.get<any>(TYPES.Store)
+
+const hydrate = create({
+  storage: AsyncStorage,
+  jsonify: true,
+  debounce: 0,
+})
+
+hydrate('store', store)
+
+export default { store }

src/stores/store.ts

+import { observable, action, reaction } from 'mobx'
+import { persist } from 'mobx-persist'
+import { injectable } from 'inversify'
+
+@injectable()
+export default class Store {
+  @persist @observable count: number = 0
+
+  @action
+  inc() {
+    this.count = this.count + 1
+  }
+}

src/utils/utils.ts

+import * as R from 'ramda'
+
+export const isBlank = R.anyPass([R.isNil, R.isEmpty])
+
+export const isNotBlank = R.complement(isBlank)
+
+/**
+ * 样式对象辅助函数
+ * @param styles 样式
+ * @param cls 类名
+ * @returns 样式对象
+ */
+export const getStyles = (styles: any, ...cls: any[]) => {
+  let clses: any = []
+  if (isNotBlank(styles) && isNotBlank(cls)) {
+    clses = R.compose(
+      R.concat(clses),
+      R.map((key: any) => {
+        if (R.type(key) === 'Array') {
+          return getStyles(styles, ...key)
+        }
+        return [styles[key]]
+      })
+    )(cls)
+  }
+  return clses
+}
+
+export const g = getStyles

tsconfig.json

@@ -4,18 +4,14 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "isolatedModules": true,
+    "experimentalDecorators": true,
     "jsx": "react",
     "lib": ["es6"],
     "moduleResolution": "node",
     "noEmit": true,
     "strict": true,
     "target": "esnext",
-    "rootDir": ".",
+    "rootDir": "."
   },
-  "exclude": [
-    "node_modules",
-    "babel.config.js",
-    "metro.config.js",
-    "jest.config.js"
-  ]
+  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
 }