react-native开发总结

项目地址：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: || ;
justifyContent: flex-start | flex-end | center | space-between | space-around;
alignItems: flex-start | flex-end | center | baseline | stretch;
alignContent: flex-start | flex-end | center | space-between | space-around | stretch;

order: ;
flexGrow: ; /* default 0 /
flexShrink: ; / default 1 /
flexBasis: | auto; / default auto /
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
alignSelf: auto | flex-start | flex-end | center | baseline | stretch;
图片
图片使用
<Image source={require('./my-icon.png')} />
命名规则
• icon_test.png
• icon_test@2x.png
• icon_test@3x.png
链接原生库
第一步
安装带原生依赖的库
npm install <某个带有原生依赖的库> --save
第二步
运行以下命令，它会根据package.json文件中的dependencies和devDependencies记录来链接所有需要链接的库
react-native link
开发技巧
• 启动hot或者debug的时候，切记不要同时启动ios and android，两者会发生冲突，导致出现程序崩溃，从而影响开发
• 最好的方式是，启动一个hot或debug，这样可以良好的进行开发；另一个手动足够了
处理触摸事件
使用"Touchable"开头的一系列组件
通过onPress属性接受一个点击事件的处理函数
• 两种方式绑定事件，并处理点击范围
• 推荐第二种，方便传递数据
_onPressButton=((item)=>{
alert(1)
console.log(item);
})
render() {
return (


<View style={[S.btn,{backgroundColor:${this.state.bg}}]}>
{this.state.bg}


<TouchableHighlight onPress={()=>{
this._onPressButton(this.state.bg)
}}>
<View style={[S.btn,{backgroundColor:${this.state.bg}}]}>
{this.state.bg}



);
}
解决版本冲突问题
js版本和rn版本出现冲突
• Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
• 清除Watchman：watchman watch-del-all
• 清除rn缓存：react-native start --reset-cache
解决路由失效问题
• createTabNavigator要在createStackNavigator里面进行注册，才能够使用createStackNavigator具有的方法，这个是我第二次配置的时候掉进的一个坑
this.props.navigation属性详细说明
• 在createTabNavigator里面没有push、replace等方法
• 在createStackNavigator中存在push、replace等方法
AsyncStorage保存报错
JSON value '' of type NSNull
• 当保存值为undefined的时候，报错
• 防止这种问题发生最好在this.state中保存初始值为空，必要时可以提醒用户
react-native支持的style props
• 查看最新版属性支持情况，最简单的直接在页面使用错误的属性，然后查看报错信息😂
Valid style props: [
"alignContent",
"alignItems",
"alignSelf",
"aspectRatio",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomEndRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomStartRadius",
"borderBottomWidth",
"borderColor",
"borderEndColor",
"borderEndWidth",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStartColor",
"borderStartWidth",
"borderStyle",
"borderTopColor",
"borderTopEndRadius",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopStartRadius",
"borderTopWidth",
"borderWidth",
"bottom",
"color",
"decomposedMatrix",
"direction",
"display",
"elevation",
"end",
"flex",
"flexBasis",
"flexDirection",
"flexGrow",
"flexShrink",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontVariant",
"fontWeight",
"height",
"includeFontPadding",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginEnd",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginStart",
"marginTop",
"marginVertical",
"maxHeight",
"maxWidth",
"minHeight",
"minWidth",
"opacity",
"overflow",
"overlayColor",
"padding",
"paddingBottom",
"paddingEnd",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingStart",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"start",
"textAlign",
"textAlignVertical",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"textShadowColor",
"textShadowOffset",
"textShadowRadius",
"textTransform",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection",
"zIndex"
]
StatusBar解决android状态栏问题
设置StatusBar

设置顶部模块的样式
• 注：padding值需要+高度值=>height最终值
height: 50,
paddingTop: 10,
Platform区分ios and android平台
三种方法实现跨平台：
1. Platform.OS
2. 使用Platform的select方法
3. 使用不能组件名：ios使用header.ios.js；android使用header.android.js
const instructions = Platform.select({
ios: 'ios',
android: 'android',
});
请求fetch封装
• HttpUtils.js
引入
import HttpUtils from '../../HttpUtils';
使用
• 在全局global.data.domain保存请求域名
• 请求需要header传递token的使用,global.data.token
HttpUtils.post(${apiConfig}, {
platform: 'ios'
},global.data.token)
.then(rtn => {
global.data.config = rtn;
// console.log(配置=>( ${JSON.stringify(rtn)} ));
})
.catch(err => {
console.log('error', err)
})
请求环境+请求地址定义
请求环境
• 在addr.js中env变量定义
请求地址
• 在addr.js中addrList统一管理所有请求地址
使用
import addrList from '../../addr';
const {apiConfig}=addrList;
react-native-scrollable-tab-view
• 解决逗号影响的报错问题：在路径~/node_modules/react-native-scrollable-tab-viewSceneComponent.js下删除即可
react-native初始化报错，导致无法初始化
• 重新设置一下地址
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
动态切换状态
• 采用对象的形式来操作，这样可以使用state里面的参数，来动态切换
• 解决了直接应用的报错问题，以后遇到同样的问题要及时想到对象方式
声明周期-初始渲染 and 检测goBack()
• 为了保证页面的数据实时性，最好在初始的时候进行请求
componentDidMount(){}
检测goBack()
需要重新加载app
第一步
• 在删除组件的时候，定义goBack事件
componentWillUnmount(){
DeviceEventEmitter.emit('goBack', 'goBack刷新返回页面数据');
}
第二步
• 在初始渲染中监听，goBack自定义事件
componentDidMount(){
// 接收
this.deEmitter = DeviceEventEmitter.addListener('goBack', (a) => {
this.loadData();
});
}
安卓打包
第一步：生成Android签名证书
第二步：设置gradle变量
• 将你的签名证书copy到android/app目录下
• 编辑~/.gradle/gradle.properties或../android/gradle.properties(一个是全局gradle.properties，一个是项目中的gradle.properties，大家可以根据需要进行修改) ，加入如下代码：
MYAPP_RELEASE_STORE_FILE=ch09-keystore.jks
MYAPP_RELEASE_KEY_ALIAS=ch09-keystore
MYAPP_RELEASE_STORE_PASSWORD=123456
MYAPP_RELEASE_KEY_PASSWORD=123456
第三步：在gradle配置文件中添加签名配置
• 编辑android/app/build.gradle文件添加如下代码：
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
第四步：签名打包APK
• terminal进入项目下的android目录，运行如下代码：
./gradlew assembleRelease
• 签名打包成功后你会在android/app/build/outputs/apk/目录下看到签名成功后的app-release.apk文件。
• 提示：如果你需要对apk进行混淆打包 编辑android/app/build.gradle：
/*

• 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||status304){
  // 成功
  const promise = result.json()
  promise.then(rtn=>{
  // 成功
  })
  }else if(status403){
  // 跳转登录
  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