React-Native项目总结

一、常见的五种APP开发模式

Native App，web App，hybrid App，React Native，Weex

• Native App原生API开发App，iOS用OC语言开发，性能高
• Hybrid App混合开发模式，原生加html共同开发，html嵌在webview中
• React Native基于React开发的App，跨平台，热更新，有Native的体验
• Web App用Html开发的移动端网页，类似微信小程序，整个APP都是网页，用户不需要安装，但是需要联网
• Weex基于Vue语法开发的APP，底层会自动把JS代码解析成对应平台，本质是原生API开发，表面上是Vue开发

二、React-Native的原理

1. React-Native框架提供一份OC模块表，JS参照模块表，间接调用OC的代码
2. React-Native如何做到JS和OC交互：
   1)首先写好JSX代码，将JSX代码解析成JavaScript代码
   2）OC读取JS文件，利于JavaScriptCore的执行
   3)JavaScript代码返回一个数组，数组中描述OC对象，OC对象的属性，OC对象所需要执行的方法，以此为该对象设置属性，调用方法

三、React-Native项目与React项目的区别：

1. React-Native是一个搭建APP的框架，React是一个用来构建网页站点JavaScript库
2. React-Native几乎不需要集成其它东西就可以直接运用ES6，ES7特性编写，React则可能需要集成Webpack的打包器。
3. React-Native不使用HTML来渲染APP，而是使用其特有的组件。这些组件渲染到APP上是真正的iOS和Android UI组件。React使用的是HTML，渲染的是网页上的DOM元素。
4. React-Native中使用的样式，不是传统的CSS,中间线，而是有其特有的样式属性，驼峰式命名。 "alignItems","alignSelf", "backfaceVisibility", "backgroundColor","borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomWidth", "borderColor", "borderLeftColor", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightWidth", "borderStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopWidth", "borderWidth", "bottom", "color", "flex", "flexDirection", "flexWrap", "fontFamily", "fontSize", "fontStyle", "fontWeight", "height", "justifyContent", "left", "letterSpacing","lineHeight", "margin", "marginBottom", "marginHorizontal", "marginLeft", "marginRight", "marginTop", "marginVertical", "opacity", "overflow", "padding", "paddingBottom", "paddingHorizontal", "paddingLeft", "paddingRight", "paddingTop", "paddingVertical", "position", "resizeMode", "right", "rotation", "scaleX", "scaleY", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "textAlign", "textDecorationColor", "textDecorationLine", "textDecorationStyle", "tintColor", "top", "transform", "transformMatrix", "translateX", "translateY", "width", "writingDirection" React-Native对flex布局有很好的支持，没有网页上其兼容性的困扰。
5. 导航不同：React-Native中导航方式现在用的较多的是React Navigation。之前比较老的Navigator和NavigatorIOS已逐渐被替代。 简单介绍一下React Navigation
   1）创建一个AppNavigation.js,注册所有页面，设置其别用名

import IndexScreen from './index';
import LoginScreen from './page/login';
export const AppNavigator = StackNavigator({
index: { screen: IndexScreen },
login: { screen: LoginScreen },
},{
initialRouteName: 'index', // 默认显示界面
});
跳到下一个页面触发方法：
_goLogin(){
this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'login'}));
}
复制代码

React导航用的是react-router

6. 平台的特殊代码 React-Native的Platform可以监测平台，安卓还是iOS，具体为：Platform.OS === 'ios' ? 1 : 0
7. 开发工具不同 React-Native针对iOS用Xcode和ios模拟器，针对Android用Android Studo和Android模拟器 而React就是浏览器 React-Native打开调试模式，也能在浏览器中打断点，或看到一些log日志用于调试
8. 开发和部署方式不同 React-Native开发的是APP，所以针对Android就用Android Studo打出测试包或者正式包， 针对iOS，就由Xcode打出要上架的ipa，提交审核，相对于原生，还有热更新的好处。 React开发的是网页，所以就正常Webpack打包，发布上线

四、React-Native组件的生命周期

React-Native应用是由各类型的组件构成，每个组件有自己的生命周期。 组件从出生到消亡，React-Native框架通过不同的生命周期方法，提供了方便切入生命周期各阶段的钩子函数。 当应用启动，React-Native框架在内存中维护着一个虚拟的DOM树。 生命周期方法：组件初始化及挂载阶段、组件运行阶段及组件卸载阶段

1.初始化及挂载阶段

constructor(props) { //构造函数   super(props); //继承父组件传来的属性   this.state = { //设置自己的state     //key : value   }; }
componentWillMount(){  //组件将要加载到虚拟DOM,在render之前执行，仅一次
}
componentDidMount(){   //组件已经加载到虚拟DOM,在render之后执行，仅一次，进行网络请求或集成其它JavaScript库
}
复制代码

2. 运行期阶段

componentWillReceiveProps(nextProps){  //组件接收到新的props，重新设置state，可多次
  this.setState({
    //key:value
  })
}
shouldComponentUpdate(nextProps,nextState){
//在上面函数执行完毕后执行，或在state更改之后，若返回false，组件不会重新渲染,可多次
  return true
}
componentWillUpdate(nextProps,nextState){
//在上面函数执行完毕后执行
}
componentDidUpdate(){ //在render方法后执行，可多次
}
render(){
  return (
    <View></View>
  )
}
复制代码

3. 卸载阶段 componentWillUnmount(){ //组件由虚拟DOM卸载时调用 }

五、踩坑

1.项目启动总是加载pre-bundled，导致修改之后reload无效

答：找到react-native-xcode.sh,将.xip.io删掉

2. Android手机上如何设置阴影，设置阴影后为什么有时候会失效？

shadowColor:’#555’,
shadowOpacity:0.5,
shadowRadius:10,
shadowOffset:{width:2,height:2},
elevation:1,
zIndex:Platform.OS == ‘ios’?2:1,
// 失效是应为Android5.0以上系统才支持elevation
复制代码

3. Android手机底部tab总是被键盘顶起？

在android目录下有AndroidManifest.xml设置android:windowSoftInputMode="stateVisible|adjustPan"

4. Android头部的状态栏怎么设置？
   StatusBar backgroundColor={this.state.bgColor}
5. 有时候xcode打不开？

升级xcode

6. 如何设置iOS的icon图标？
   1）iOS APP图标尺寸：40，60，58，87，80，120，180，1024
   2）安卓APP图标尺寸：114 iOS的icon设置如下：

2）iOS的启动图设置：

参考：【链接】iOS.11后的iOSLaunchImage blog.csdn.net/ozhuimeng12…

7. ios打包所需要的步骤有？
   1）在电脑上通过钥匙串下载证书
   2）identifier的App IDs设置，通过Xcode上的bunlde identifier设置
   3）将测试ios的udid通过device设置
   4）Profiles设置，选择对应的App IDs,选择对应的device
   备注：一个Bundle Identifier只能对应一个Identifiers， 就算是不同的帐号，在设置Identifiers时也不能设置一样的，必须修改。

8. iOS离线的方法

react-native bundle --entry-file index.ios.js --bundle-output ./ios/main.jsbundle --platform ios --assets-dest ./ios --dev false
复制代码

9. React-Native热更新机制
   通过code push，所谓的code push是指：调用react native的打包命令，将当前非native的代码全量打包成一个bundle文件， 然后上传到微软云服务器。在APP的启动页（或splash页）编写请求更新的代码（请求包括了本地版本，hashCode, appToken等信息） 微软服务器对比本地文件js bundle版本和微软服务器的版本，如果本地版本低，就下载新的js bundle 下来后实现更新（ code push框架实现） 参考：blog.csdn.net/u013718120/…
10. 安卓中TextInput组件的样式问题
    TextInput在安卓上默认有一个底边框，同时有一些padding，导致输入框内的文字不居中

去掉底部框，用underlineColorAndroid=“transparent”
多行输入，设置multiline = {true}，在安卓上文本默认居中，想让其居顶显示，可设置textAlignVertical: 'top'
让文字居中，设置padding: 0
复制代码

14. brew错误
    rm -f 是彻底删除，要谨慎使用
    brew报错的时候，先移除文件，再下载，brew就好了，然后就可以install或者uninstall了

15. 快速点击多次跳转的问题

let linkFlag = true;
if(linkFlag){
  this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'login', params: opt }));
  linkFlag = false;
}
setTimeout(
 () => {
   linkFlag = true;
}, 1000);
复制代码