在不长的时间里面，我们通过rn和mobx构建了一个便签应用, 这期间的开发和调试我们是使用crna的命令通过expo这个容器工具来完成的。同样它也帮助我们更少的面对关于环境配置的问题。
但是，我们最终开发的目标还是会生成两个端的native app(ipa+apk)，所以我们尝试通过最基本的命令去构建我们的程序（仍然使用之前的代码）；下面我把这个过程中遇到的问题做一个记录.
expo下的babelrc：
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
这里的配置是crna命令自动生成的。
package.json:
{
"name": "NoteAppNew",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.8.1",
"jest-expo": "23.0.0",
"react-test-renderer": "16.0.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^23.0.4",
"mobx": "^3.4.1",
"mobx-react": "^4.3.5",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-elements": "^0.18.5",
"react-navigation": "^1.0.0-beta.21"
}
}
这里的一些依赖是后面安装时加进去的，需要注意的是vector-icons这个库是expo默认支持的，但我们后面注意到这是一个需要native支持的库，所以在npm install后需要手动link才可以工作，否则会编译报错。
我们后创建的app：
{
"name": "NoteRNative",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"mobx": "^3.4.1",
"mobx-react": "^4.3.5",
"react": "16.0.0",
"react-native": "0.51.0",
"react-native-elements": "^0.18.5",
"react-native-vector-icons": "^4.4.3",
"react-navigation": "^1.0.0-beta.22"
},
"devDependencies": {
"babel-jest": "22.0.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-react-native": "4.0.0",
"jest": "22.0.3",
"react-test-renderer": "16.0.0"
},
"jest": {
"preset": "react-native"
}
}
这里因为我们使用了mobx的装饰器语法（既然已经使用了mobx，那么自然就要用装饰器了，高大上，不解释），在新版本expo下我们基本上没有遇到什么障碍（仅仅是设置了vs code的检查，启用了装饰器的配置，这样vs code不会报错, 和运行无关）,但是我们使用原始命令去运行则遇到了不少的障碍。
经过实践我们发现，mobx官网的设置推荐是不合适的。建议大家只要安装babel-plugin-transform-decorators-legacy这个plugin就可以，然后修改babelrc的配置把这个plugin用起来：
{
"presets":["react-native"],
"plugins":["transform-decorators-legacy"]
}
这个插件也是要通过npm 来安装的；再装上其他所有的依赖. 注意：对于涉及到原生代码的插件，我们需要执行react-native link 。
babelrc插件是不可见的，可以使用touch .babelrc创建，通过open .babelrc来访问。
插件和babel都安装配置完成以后，使用npm start启动node服务器，然后再使用react-native run-ios (或者android)来运行就可以了。
对于native工程：
现在的rn工程配置相关也做了很多改良，比如ios和android的入口js现在只有一个了，另外对于bundle的生成我们只需要改变工程配置（debug/release）就可以达到我们的目的，在release下面我们会自动的把bundle打进去而不会依赖于node服务器；在debug下也有个prelease的东西可以供你使用静态的bundle，不得不说比最早之前人性化了很多。
PS：原生下面更换修改launch图时候需要删除掉手机先前装的app重新安装，覆盖安装看不到效果。icon图标放到原生工程内。
目前就先记录这么多，我们的app已经放到fir上下载了，release出来的包8.4m，可以接受。
