框架介绍

react-navigation

rn的一个管理路由、页面切换的框架

mobx

管理异步数据的框架，实现观察者模式的理念，将异步数据统一管理起来，使数据实现自动更新

antd

淘宝开发的rn和react的UI框架

环境配置文件

//package.json
{
  "name": "lyra",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "install-apk": "adb install -r ./android/app/build/outputs/apk/app-debug.apk",
    "debug-apk": "cd android && gradlew assembleDebug && npm run install-apk && npm run bind",
    "build:api": "node ./axios_service/codegen.js && tsc -p ./axios_service",
    "test": "jest"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  "dependencies": {
    "antd-mobile-rn": "^2.2.1",
    "axios": "^0.18.0",
    "camelcase": "^5.0.0",
    "jsc-android": "224109.x.x",
    "lodash": "^4.17.10",
    "mobx": "^5.0.3",
    "mobx-form-validator": "^1.3.2",
    "mobx-react": "^5.2.3",
    "prop-types": "^15.6.2",
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-storage": "^0.2.2",
    "react-native-vector-icons": "^5.0.0",
    "react-navigation": "^2.10.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.6",
    "babel-jest": "23.4.2",
    "babel-plugin-import": "^1.8.0",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-react-native": "4.0.0",
    "eslint": "^5.2.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-import-resolver-babel-module": "^4.0.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.10.0",
    "husky": "^1.0.0-rc.13",
    "jest": "23.4.2",
    "prettier": "^1.14.0",
    "pretty-quick": "^1.6.0",
    "react-test-renderer": "16.3.1",
    "swagger-axios-codegen": "^0.2.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

重点模块解析

babel

新一代javascript语言的转换器，可将es6转换成es5，并配有支持各类型框架语言或写法的模块

默认情况下，所有带有 .js 扩展名的文件都会在更改后自动与 Babel 一起编译。生成的 ES5 文件和 source maps 将保存在原始文件旁。
项目的根目录的 .babelrc 文件就是管理babel的文件，默认如下：
```
{
"presets": ["react-native"]
}
```
一般使用react-native init projectName时babel的基本配置已经自动配置好了，我们所要做的是根据需要增加一些附加模块来支持。

babel-plugin-import

实现‘按需加载’的模块

安装后在.babelrc中配置：
```
{
"presets": ["react-native"],
"plugins": [
[
  "import",
  {
    "libraryName": "antd-mobile-rn" //蚂蚁UI库按需加载
  }
],
]
}
```
babel-plugin-module-resolver

babel-plugin-module-resolver 是一个Babel模块解析插件, 在.babelrc中可以配置模块的导入搜索路径. 为模块添加一个新的解析器。

推荐配置如下：

//plugins属性里添加
[
  "module-resolver",
  {
    "cwd": "babelrc",
    "root": ["./src"],
    "alias": {
      "utils": "./src/utils"
    }
  }
]

选项：


1. cwd：默认情况下，工作目录是用于解析器的工作目录，但是您可以覆盖您的项目。

自定义值babelrc将查找最接近babelrc配置的文件。
自定义值packagejson将查找最接近package.json配置的文件。 2.root：指定根目录。
使得模块文件的查找可以从根目录开始，而不用往上'../'到根目录 3.alias：添加额外的路径
将写入的文件夹作为查找模块的路径之一，所以你可以直接import Module from ’module‘
```
### babel-plugin-transform-decorators-legacy
用于解析decorators装饰符（@）的转换器
```
在.babelrc里的plugins里添加
```
"transform-decorators-legacy"
```
eslint

一个js代码检测工具
配置文件:.eslintrc
webstorm配置在File |Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint里导入eslint目标文件夹

husky

一个git提交的自动化检查插件

prettier

一个比较流行的代码格式化工具，主要是跟eslint一同使用，webstorm会自动配置prettier的路径，快捷键：ctrl+shift+p 可格式化代码，或者在webstorm添加prettier的File Matcher可实现保存代码时自动格式化

pretty-quick

跟husky配合使用

axios

axios 是一个基于 promise 的 HTTP 库，使用axios来与后端进行交互
文档：axios文档

camelcase

驼峰命名法

jsc-android

一个可以将最新的jsc版本合并到android框架中
jsc:即JavaScriptCore,是rn、safari的js解析引擎，
项目中使用此模块是为了解决mobx5使用了jsc超前版本的语法导致解析不了的bug

配置： 1.修改android/build.gradle文件以将jsc-android包中打包的新本地maven存储库添加到搜索路径：


allprojects {
存储库{
    mavenLocal（）
    jcenter（）
    maven {
        //从npm安装所有React Native（JS，Obj-C源，Android二进制文件）
        url“$ rootDir /../ node_modules / react-native / android”
    }

maven {
//包含AAR的本地Maven仓库，其中包含为Android构建的JSC库

url "$rootDir/../node_modules/jsc-android/dist" } } }

2.更新build.gradle位于应用程序文件android/app/build.gradle以强制应用程序构建以使用新版本的JSC库，而不是将react-native gradle模块中指定的版本作为依赖项：

}

configurations.all {
resolutionStrategy {
force'org.webkit：android-jsc：r224109'
}
}

依赖{ 编译fileTree（dir：“libs”，包括：[“* .jar”]）

### lodash
JavaScript的一套工具库，内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数
### mobx-form-validator
mobx的一个form表单自动校验的框架
- 基本用法

class LoginForm { @observable @validator([ { required: true, message: '用户名不能为空' } ]) userName = ''

@observable @validator([ { required: true, message: '密码不能为空' } ]) password = '' } const form = new RegisterForm(); console.log(form.validateErrorUserName); // 用户名不能为空 console.log(form.validateErrorPassword); //密码不能为空 console.log(form.isValid); // false

### react-native-storage
是本地持久存储的封装，可以同时支持react-native(AsyncStorage)和浏览器(localStorage)
### script下的字段
都可以用yarn name或npm run name运行
# 基本架构
### 整体概况
- 整体目录
![](https://github.com/164275563/blog/blob/master/images/directorys.PNG?raw=true)
- src目录
![](https://github.com/164275563/blog/blob/master/images/src.PNG?raw=true)
### 基本配置
> app.js

import boot from './src/boot/index' const app = boot() export default app

> boot/index.js

import { configure } from 'mobx'

import config from './configureStore' import app from './setup' // 全局配置文件 import 'utils/storage' import 'utils/axiosConfig'

export default function() { const stores = config() configure({ enforceActions: true }) // 进入严格模式，不允许通过action之外的方式改变observable属性 return app(stores) }

> boot/configureStore.js

import AppStore from '../store/AppStore'

export default function() { const appStore = new AppStore() return { appStore } }

> boot/setup.js

import * as React from 'react' import { Provider } from 'mobx-react/native'

import App from '../App'

export interface Props {} export interface State {}

export default function(stores) { return class Setup extends React.Component<Props, State> { render() { return ( <Provider {...stores}>

    </Provider>
  )
}

} }

> src/app.js

import React from 'react' import { createStackNavigator, createSwitchNavigator } from 'react-navigation' import { NavigationService } from 'utils' import SplashScreen from './screens/Splash' import HomeScreen from './screens/Home' import LoginScreen from './screens/Login' import type { Props } from './boot/setup' import FrontScreen from './screens/Front' import ElMeterScreen from './screens/ElMeter' import MessageScreen from './screens/Message' import SettingScreen from './screens/Setting' import StackStyleInterpolator from 'react-navigation/src/views/StackView/StackViewStyleInterpolator.js'

const AppStack = createStackNavigator( { Home: HomeScreen, First: FrontScreen, ElMeter: ElMeterScreen, Message: MessageScreen, Setting: SettingScreen }, { headerMode: 'none', transitionConfig: () => ({ //设置横向切换动画 screenInterpolator: StackStyleInterpolator.forHorizontal }) } )

const RootStack = createSwitchNavigator( { Splash: SplashScreen, App: AppStack, Login: LoginScreen }, { initialRouteName: 'Splash' } )

export default class App extends React.Component { render() { return ( <RootStack ref={navigatorRef => { NavigationService.setTopLevelNavigator(navigatorRef) }} /> ) } }

> screens/Home/index.js

import React from 'react' import { createBottomTabNavigator } from 'react-navigation' import Icon from 'react-native-vector-icons/FontAwesome' import FirstScreen from '../Front' import ElMeterScreen from '../ElMeter' import MessageScreen from '../Message' import MineScreen from '../Mine' import { basicColor } from '../../theme/MainStyle'

const renderIcon = (name, tintColor) => <Icon name={name} size={22} style={{ color: tintColor }} />

const tabScreens = { first: { screen: FirstScreen, navigationOptions: { tabBarLabel: '首页', tabBarIcon: ({ tintColor }) => renderIcon('home', tintColor) } }, elMeter: { screen: ElMeterScreen, navigationOptions: { tabBarLabel: '电表', tabBarIcon: ({ tintColor }) => renderIcon('cube', tintColor) } }, message: { screen: MessageScreen, navigationOptions: { tabBarLabel: '消息', tabBarIcon: ({ tintColor }) => renderIcon('comments-o', tintColor) } }, mine: { screen: MineScreen, navigationOptions: { tabBarLabel: '我的', tabBarIcon: ({ tintColor }) => renderIcon('user', tintColor) } } } const tabConfig = { tabBarPosition: 'bottom', tabBarOptions: { inactiveTintColor: '#a0a0a0', activeTintColor: basicColor.mainColor, indicatorStyle: { backgroundColor: 'transparent' }, showIcon: true, style: { margin: 0, backgroundColor: '#ffffff', borderTopWidth: 0.66, borderTopColor: '#dddddd' }, tabStyle: { padding: 0, margin: 0 }, labelStyle: { fontSize: 11, margin: 0, marginBottom: 5 }, iconStyle: { marginTop: -3, marginBottom: 0 } }, swipeEnabled: false } const HomeTab = createBottomTabNavigator(tabScreens, tabConfig)

export default HomeTab

### babel配置
> .babelrc

{ "presets": ["module:metro-react-native-babel-preset"], "plugins": [ [ "module-resolver", { "cwd": "babelrc", "root": ["./src"], "alias": { "utils": "./src/utils" } } ], [ "import", { "libraryName": "antd-mobile-rn" } ], ["@babel/plugin-proposal-decorators", { "legacy": true }] ] }


### 代码格式化配置
> .eslintrc

// eslint { "root": true, "parser": "babel-eslint", // 使用babel解析器 // 加入各个环境的全局变量 "env": { "es6": true, "node": true, "jest": true }, "extends": [ "plugin:prettier/recommended", "plugin:import/errors", "plugin:import/warnings", "plugin:react/recommended", "eslint:recommended" ], "settings": { "import/resolver": { "babel-module": { "paths": ["src"] } } }, "rules": { "no-console": "off", // 是否允许使用console，eslint/recommended默认开启，这里把它关闭了 "react/prop-types": [1] // 要求组件指定proptypes },

// 自定义全局的变量(env里的环境不包括的) "globals": { } }

> .prettierrc

// prettier

{ "singleQuote": true, "printWidth": 120, "semi": false, "tabWidth": 2 }

>.package.json

// git的hook ... "husky": { "hooks": { "pre-commit": "pretty-quick --staged" //提交前进行一次prettier校验 } }, ...

JNUfeatherwit / blog

ReactNative之react-navigation+ mobx+antd 基本框架搭建 #1

框架介绍

react-navigation

mobx

antd

环境配置文件

重点模块解析

babel

babel-plugin-import

babel-plugin-module-resolver

eslint

husky

prettier

pretty-quick

axios

camelcase

jsc-android