项目搭建

默认开发环境搭建是没有异常

1. 安装react-native-cli以及初始化一个项目

$ npm install -g react-native-cli // react-native命令行工具
$ react-native init my-app
# or yarn

2. 使用模拟器启动项目

cd myapp
# ios 这里我在npm scripts配置过了
npm run ios       // react-native ios
# android
npm run android   // react-native android
# ... 其他命令查看文档了解

在macOS系统下可以直接用命令行启动模拟器，但是启动安卓需要手动打开模拟器，这个问题需要进一步解决一下，暂时没找到解决方式。 3.修改项目结构 新建src文件夹，将App.js重命名为index.js并移动到src下，修改跟目录下index.js根组件引入，目录结构调整如下：

└── src
    ├── components     //公共组件
    ├── data           //模拟数据
    ├── navigation     //路由导航react-navigation
    ├── screens        //页面
    └── store          //数据状态管理redux
└── index.js

详细修改代码可以查看源码

4.新增eslint代码检查以及prettier代码格式化 安装eslint以及prettier依赖包

npm i eslint prettier -D

新建.eslintrc.js文件，这里也可以选json格式，通过全局安装eslint去初始化也是可以的，请自行尝试，这里给出当前项目配置选项。

module.exports = {
  extends: "standard",
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    sourceType: "module"
  },
  parser: "babel-eslint",
  plugins: ["react"],
  rules: {
    "no-unused-vars": 0,
    "react/jsx-filename-extension": [
      2,
      {
        extensions: [".js", ".jsx"]
      }
    ]
  }
};

在自己手动配置的过程当中会遇到很多的问题，根据自己团队的一个习惯，可以提取出这里配置，作为一个公共的包，这里使用的standard标准。