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;
图片
图片使用

命名规则
• 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 (



{this.state.bg}


{
this._onPressButton(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||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