react-native开发总结

Posted 2020-12-31 liu-fei-fei

项目地址：http://liu12fei08fei.github.io/blog/41react-native.html
说明
? 项目总结代码地址
? 从项目开始启动（2018-07-02）到项目进入测试（2018-08-20）
? 从我基本没用过react，到直接上手react-native
? 其实从内心我是又爱又怕，爱是我确实很早就像下手除Vue以外的框架，多接触和学习一些不一样的思想；怕是前端就我一个，一切坑都由自己来抗；可想而知，内外压力一定会很大
? 过程就是日复一日的研究在研究，不停地问问题，然后在研究；开发rn很想开发小程序，更多时候还是利用rn提供的组件，再加上一些js技巧
? 结果：自己对社区的利用更加的顺手，面对难题不在过分畏惧而是不断深入思考，直至解决
? 心理：其实直面难题并不难，难的是自己看到了难题背后还有无数个难题，这时候自己就不想面对了；后来知道与其逃避，不如遇到一个干掉一个，不然攻城狮不是白叫了
? 下面是自己在实际中从开始到结束总结的一些东西，后续随着进展还会更新
简介
? 记录开发react-native中各种有意思的事情
? 最新探索，用来进行各种尝试的空间
? 完成的探索，记录所有已经完成的模块、功能和效果
? 中转站，暂时无用
安装
全局脚手架
npm i -g react-native-cli
安装基础项目
react-native init <项目名称>
运行
优化后的运行
? ios：npm run ios
? android：npm run android
? ios and android：npm run s
原始启动
? ios：react-native run-ios
? android：react-native run-android
资源
? navigation集成
? 集成icons
? react-native-easy-toast
? rn资源列表
? 横向滑动展示按钮效果
? 自定义行动列表
? 密码输入效果
? 选项卡导航之间滑动
? 二维码生成
未探索的资源
365个库中寻找77个
1. select选择控件
2. 开关式选择列表
3. 表情选择器
4. 左右滑动层
5. 手机号选择控件
6. 登录动画
7. 图片查看器
8. 菜单操作动画
9. 滑动操作图片展示样式
10. 操作打字效果
11. 声音可视化
12. 占位符
13. 图片查看器
14. 模糊背景效果
15. 本地图片超级操作
16. 四面八方拖动效果
17. 信用卡输入效果
18. 展开动画效果
19. chart
20. 初始化启动页
21. 日期
22. 左右滑动操作卡片效果
23. 列表拖拽
24. chart
25. 密码锁效果
26. 星级评价
27. 手动签字
28. 滑动时间轴效果
29. 国家26字母选择
30. PDF查看
31. 26字母选择
32. 分享
33. 对话框
34. 电话、地址等操作
35. 后台信息保护
36. 图片查看器
37. 左右滑动动画
38. 无网络操作
39. 颜色选择器
40. 左右滑动tab动效
41. 加载中效果
42. 左右滑动效果，类似酷划锁屏
43. 二维码生成器
44. 图片查看器
45. 视差效果
46. 日期
47. 点击效果、
48. 扇形菜单
49. 手势识别
新增页面需要在三个地方进行操作
1. data里面的complete.js中添加数据，方便在完成的探索中出现
2. navigators中的AppStackNavigators.js里面进行引入=>注册，使得路由正常
3. pages里面添加页面
优化package.json使开发更加方便
? 在scripts中添加，如下内容：
"ios":"react-native run-ios",
"android":"react-native run-android",
"s":"npm run ios && npm run android",
flex布局常用属性
? 防止在flex中出现，固定元素被挤压的问题，使用flex:1进行优化
display: ‘flex‘;
flexDirection: row | row-reverse | column | column-reverse;
flexWrap: nowrap | wrap | wrap-reverse;
flexFlow:

order:

• Run Proguard to shrink the Java bytecode in release builds.
  /
  def enableProguardInReleaseBuilds = true
  错误处理
  fetch(apiLogin, {
  method: ‘POST‘,
  headers: {
  ‘Accept‘: ‘application/json‘,//通过头指定，获取的数据类型是JSON
  ‘Content-Type‘: ‘application/json‘,
  ‘Authorization‘:global.data.token,
  },
  body: JSON.stringify({
  // 请求参数
  })
  })
  .then(result => {
  const {status,statusText} = result;
  if(status>=200&&status<300||status==304){
  // 成功
  const promise = result.json()
  promise.then(rtn=>{
  // 成功
  })
  }else if(status==403){
  // 跳转登录
  this.props.navigation.replace(‘login‘);
  }else{
  // 提醒 statusText
  this.refs.toast.show(statusText);
  }
  })
  .catch(error => {
  if(Object.prototype.toString.call(error) === ‘[object Object]‘){
  this.refs.toast.show(JSON.stringify(error))
  }else{
  this.refs.toast.show(error)
  }
  })
  app的logo and name
  android
  LOGO
  ? 将logo分别放到android/app/src/main/res下的四个文件夹中,命名为ic_launcher.png
  ? 没有对应上的文件夹放一张10241024或者512*512的即可
  app名称
  ? 在android/app/src/main/res/values/strings.xml中更改
  IOS
  LOGO
  ? xcode> 根目录 >Images.xcassets 将生成的图标拖入对应的位置
  app名称
  ? xcode> 根目录 >Info.plist 中修改 Bundlename 和 General> DIsplay Name