当前位置: 首页 > 工具软件 > Expo > 使用案例 >

基于 expo 框架 与 react-native 语法的 App 开发

年高洁
2023-12-01

一、前期准备

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格式

 类似资料: