React Native 知识点小记

此篇文章用于记录开发中遇到的问题和知识点...

前言

公司打算开发一个App项目。由于没有原生开发人员，组里都是纯前端开发人员，所以技术选型时采用相对成熟的 react-native 来开发。不得不说 react-native 确实很优秀，让前端开发人员能够迅速搭起一个应用运行。但开发过程中也遇到了不少问题，对前端开发来说也是一个不小的挑战。

开发环境搭建

只要严格按照 React Native 官方文档搭建即可，当时项目使用 react-native 0.57 版本基础库。

应用设置

应用名称、图标、启动屏相关设置

修改应用名称

编辑 ios/项目名称/Info.plist 文件：

<key>CFBundleDisplayName</key>
- <string>$(PRODUCT_NAME)</string>
+ <string>应用名称</string>

android

编辑 android/app/src/main/res/values/strings.xml 文件：

<resources>
- <string name="app_name">default</string>
+ <string name="app_name">应用名称</string>   
</resources>

修改图标

应用图标对尺寸有要求。比较简单地方式是准备一张 1024*1024 的图片，然后使用图标工厂在线生成。

生成文件如下：

替换 ios/项目名称/Images.xcassets/AppIcon.appiconset 中的内容。如果不需要全部尺寸可以用 XCode 打开项目 Images.xcassets > AppIcon 拖入相应尺寸的图标。

android

替换 android/app/src/main/res 下对应的图标。

添加启动页

应用打开时会有短暂的白屏，为解决这一问题项目中使用 react-native-splash-screen 库。文档写的很详细。

Launch Screen苹果官方分辨率大全

功能组件

Icon 组件

关于 svg 文件的优点就不必多说了。要想在应用中使用会有一些问题，不像在 web 中直接 img 标签引入就可以用了。比如安卓不支持 svg 静态文件的 require 😂。也为了避免每次打开应用请求多个 svg 浪费资源。

所以可以将多个 svg 文件通过脚本转换成一个 js 对象或者一个 json 文件，其格式如下：

export default {
  "arrow-left": "<svg>...</svg>"
}

上面的转换脚本可以参考 svg2json

安装

npm install react-native-svg2json --save-dev

在项目根目录输入命令如下：

// svg2json -i ${inDir} -o ${outFile}
./node_modules/.bin/svg2json -i ./src/assets/svgs -o ./src/assets/svgs.js

或者写入 package.json scripts 中，直接运行 npm run svg2json

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "svg2json": "node node_modules/.bin/svg2json -i ./src/assets/svgs -o ./src/assets/svgs.js"
}

之后如何使用，就需要 react-native-svg-uri 库，支持传入 svg 字符串来渲染 svg。但还需做好组件封装。

import React, { Component } from 'react';
import SvgUri from 'react-native-svg-uri';
import svgs from '@/assets/svgs.js'; // 生成的 svg 字符串对象
export default class Icon extends Component {
  render() {
    const { name, color, size, style } = this.props;
    let svgXmlData = svgs[name]
    if (!svgXmlData) {
      let err_msg = `没有"${name}"这个icon文件`;
      throw new Error(err_msg);
    }
    return (
      <SvgUri width={size} height={size} svgXmlData={svgXmlData} fill={color} style={style} />
    )
  }
}

使用

<Icon name="ac_unit" size="40" color="#ccc"/>

路径别名

在开发过程中通常使用 ../../../ 的方式引入组件，这种方式路径过深且不够优雅。

插件安装

npm install babel-plugin-root-import --save-dev
或者
yarn add babel-plugin-root-import --dev

在 babel 配置文件 .babelrc 或者 babel.config.js 中

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathPrefix": "~",
      "rootPathSuffix": "src"
    }]
  ]
}

注意：当 rootPathPrefix 设置为 @ 可能会导致一些以 @ 开头的 npm 包引入错误，如 @ant-design/react-native

之后使用

import foo from '~/foo';
const bar = require('~/bar');

打包和发布

应用开发完就该考虑上架了😘，由于没有经验上网查询了很多资料。

链接：react native ios打包流程、打包iOS的ipa文件、iOS生成证书描述文件打包上架Appstore详细流程

其他问题

android 图片不显示，图片名称不能是中文（开发时碰到这个问题😓）。

其他知识资源

https://juejin.im/post/5c5402f8f265da2dbd7fd084

Rubin's Blog