React Native 2019 最新实践记录

初始化一个应用

使用 react-native init AppName 命令初始化一个 React Native 应用

react-native init Chongai
mv Chongai chongai-app
cd chongai-app

我习惯性的使用 CamelCase 规范命名 App 名称,同时将文件夹改为 foobar-app 方式,上面那一行 mv 命令不一定都需要,我是为了保证项目的 git 地址没有大写字母

设置 git

git init
git remote add origin git@git.domain.com:namespace/project-name.git
git push -u origin master

安装 PrettierESLint

在本地项目中安装开发依赖

yarn add -D eslint prettier
yarn add -D eslint-config-airbnb
npx install-peerdeps --dev eslint-config-airbnb
yarn add -D eslint-config-prettier eslint-plugin-prettier

添加 .eslintrc.json 文件:

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

添加 .prettierrc

{
  "printWidth": 100,
  "singleQuote": true
}

配置编辑器

我使用的是 VSCode:

分别安装 ESLintPrettier 插件。

设置配置项目:

{
  ...
  "editor.formatOnSave": true
  ...
}

安装常用库

yarn add react-native-gesture-handler
react-native link react-native-gesture-handler

yarn add react-navigation

yarn add react-native-video
react-native link react-native-video

yarn add react-native-camera
react-native link react-native-camera

yarn add react-native-device-info
react-native link react-native-device-info

yarn add react-native-image-picker
react-native link react-native-image-picker

标签: React Native, ESLint

评论已关闭