syanbo / blog Goto Github PK

android

@ReactMethod(isBlockingSynchronousMethod = true)

iOS

RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD

利用package.json中Local Paths的特性

• 把需要的文件引入通过本地链接到dependencies

  "dependencies": {
    "syan-components": "file:./src/components"
  }

• 在components目录下建一个package.json文件

{
  "name": "syan-components",
  "version": "1.0.0"
}

• 使用就和其他npm库一样

import { BasePureComponent } from 'syan-components';

使用babel-plugin-root-import配合jsconfig.json很完美

• babel

[
      'babel-plugin-root-import',
      {
        paths: [
          {
            rootPathPrefix: '~',
            rootPathSuffix: 'js',
          },
        ],
      },
    ],

• jsconfig.json

{
  "compilerOptions": {
    "jsx": "react-native",
    "allowSyntheticDefaultImports": false,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["js/*"]
    }
  },
  "include": ["js/**/*"],
  "exclude": ["node_modules"]
}

心血来潮就把项目从0.48升级到最新版本0.55记录一下

使用react-native-git-upgrade命令进行升级
执行完成原生代码重置到了初始化
所有第三方需要重新link配置

出现的错误主要有

• View.PropTypes.style 需要换成 import { ViewPropTypes } from 'react-native'; ViewPropTypes.style
• import React, { PropTypes } from 'react'; 需要把PropTypes换到单独的npm包 prop-type
• 从原来的 index.ios.js index.android.js 换成index.js文件
• iOS的icon需要重新放入坑中
• 原先设置好的App名称也需要重新设置
• 根据不同的错误你还需要升级你使用的第三方
• 安卓运行报错'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server. 项目目录运行 react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

最后如果项目还是不能正常运行的话

建议 init 一个同样包名的项目把android或者ios文件进行替换
这样能更快帮你解决遇到的奇怪问题

ESLint 可以对你代码进行检查
Prettier 代码格式化工具，能够统一你或者团队的代码风格（酷爱）
Pre-commit Hook 在代码进行Git提交的时候进行格式化，如果有错误并终止push

准备开始安装各种包

yarn add -D babel-eslint eslint eslint-config-prettier eslint-config-react-app eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype eslint-plugin-prettier eslint-plugin-react husky lint-staged pretty-quick prettier

添加.eslintrc文件

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-undef": 0,
    "no-useless-constructor": 0
  }
}

具体的rules规则可以根据各自喜好添加

添加scripts配置命令

"scripts": {
  "precommit": "pretty-quick --staged"
}

在package.json中添加Prettier配置根据自己喜好

  "prettier": {
    "singleQuote": true
  }

如果你是后面加入的Prettier需要对整个项目.js 文件进行格式化

你可以执行命令 prettier --write src/**/*.js src对应你的文件夹

WebStorm

• 开启ESLint
• WebStorm 2018.1 版本预先集成了Prettier快捷键Alt-Shift-Ctrl-P具体在设置搜索Prettier可以找到
• 低版本可以添加 Tools Preferences | Tools | File Watchers and click + to add a new watcher. 然后进行快捷键绑定 传送到官网

VSCode

• 安装 ESLint Prettier 插件
• 在设置中添加

"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true

react-native-bundle-visualizer
babel-plugin-import

[
      'import',
      {
        libraryDirectory: 'components',
        libraryName: 'teaset',
        camel2DashComponentName: false,
        customName: (name) => {
          if (name === 'TopView') {
            return 'teaset/components/Overlay/TopView';
          } else if (name === 'Theme') {
            return 'teaset/themes/Theme';
          } else {
            return `teaset/components/${name}/${name}`;
          }
        },
      },
    ],