[移动开发]基于 expo 框架 与 react-native 语法的 App 开发

一、前期准备

1. expo 准备

? ? 在expo官网需先注册账号，方便后期打包和下载安装包（注：若发现无法访问官网，则需翻墙）

? ? expo打包（需先登录expo账号）分为android版本与ios版本，android不需要额外信息，只需执行命令：expo build:android ，但ios需要apple开发者账号与密码，执行命令：expo build:ios 之后根据要求输入即可

? ? expo打包完毕之后，会出现：Successfully built standalone app: https://expo.io/artifacts/9ddxxxxx-4cxx-4cxx-b0xx-ed749cxxxxxx ，意味着打包成功，复制此链接到地址栏即可下载安装包

? ? 开发App过程中需要引进的模块和插件可访问expo官方开发文档（注：有些插件是基于react-native开发的，而部分是expo底层的，因此需综合参考expo开发文档与react-native开发文档，优先级：expo>react-native）

? ? 开发App时也需区分ios与android，但大部分开发流程都相同，偶尔需要注意区分与兼容（注：它与web端开发有很多不同）

? ? expo开发版本为："expo":?"^40.0.0"? ? ?
? ??react-native开发版本为："react-native":?"https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz"? ?
? ? react开发版本为："react":?"16.13.1"

2. react-native 准备

? ? 如果react-native英文版看不习惯，可访问react-native 官方中文开发文档

? ? 由于是基于react语法糖开发，故在expo创建项目之后，则需建立页面路由react-navigation，同样其具备中文版：react-navigation中文开发文档

二、开发中遇到的问题

1. 组件问题

? ??Text：在垂直居中（line-height或textAlignVertical）的问题上，android和ios不一样（ios与android只有一方支持），最好的解决办法就是，在父级设置display: 'flex'，在子级本身设置alignSelf: 'center'

? ? ImagePicker：在选择图片之前，有一个访问设备图库的权限申请，该权限申请android和ios不一样，具体解决办法是在app.json文件下加入以下代码片段

"ios": {
  "infoPlist": {
    "NSPhotoLibraryUsageDescription": "AppName需要您的同意，才能访问相册",
    "NSCameraUsageDescription": "AppName需要您的同意，才能访问相机"
  }
},
"android": {
  "permissions": [
    "MEDIA_LIBRARY",
    "READ_EXTERNAL_STORAGE",
    "WRITE_EXTERNAL_STORAGE"
  ],
},

? ? ?SafeAreaContext：可防止页面遮挡顶部和尾部（例如一些机型的刘海、针孔和瀑布等，支持自定义背景色）

2. 其他问题

? ??图片只支持JPG/PNG渲染，不支持svg格式