前言
这段时间，项目中某些模块尝试了下react-native 也遇到过一些坑点，这里做个记录，希望如我一样的前端新人不会再被这些问题折磨到。
- 环境搭建
在学习资料以及社区方面RN的资料还是相比比较丰富的，只需要按着官方的文档来操作一般不会有啥问题。
官方文档地址
- 初始化项目
环境搭建后之后，就可以创建我们的RN项目了，
react-native init 项目名称
等项目初始化完成之后，我一般是找到项目目录里面iOS目录直接使用Xcode来启动项目 也可以使用
react-native run-ios或者react-native run-Android来启动。
当服务器了链接完成程序也就启动了
*项目结构以及加载过程
刚开始的时候我其实有点疑惑的，就是我们运行
Xcode时是怎么和这些js文件链接到一起的。
在我们打开的Xcode``appDelegate的文件中可以看到
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"RNDemo"
initialProperties:nil
launchOptions:launchOptions];
这里指定了加载的包名以及根文件index 根据moduleName 来初始化一个View最后渲染到主窗口上来显示。也就是说操作所有的js代码的布局样式 最后都是经由RCTRootView来显示的。
现在我们打开rn的项目
目录结构
可以看到在
rn的工程中有一个index的js文件在这个文件中有两个重要的方法。
// 注册程序入口组件, 程序启动时根据这个注册的组件名称去加载
// // 第一个参数 'RNDemo' 要跟载xocde 工程里注册的一致,
// 第二个参数 返回当前创建的模块名称、、class RNDemo extends Component
AppRegistry.registerComponent('RNDemo', ()=>RNDemo);
另一个就是render方法。所有的UI展示需要通过这个方法来渲染
当组件要显示时，系统也会自动调用这个方法
render(){
return（
)
}
现在我们可以在这个方法里返回一个UI组件看看会有什么效果。
render(){
return(
<View></View>
)
}
当然在运行之前我们需要导入一些相应的组件
import React, {Component} from 'react'
// 2.导入常用组件,注册组件,样式组件,View组件,Text组件
import
{
AppRegistry,
StyleSheet,
Text,
View
}
这里忍不住吐槽一句，在RN里貌似没有我们
iOS的主头文件一说，用到一个控件就要导入一次还是蛮麻烦的
现在应该可以启动起来了。。。。。。
但是应该是一片空白，因为我们没有设置样式。
return(
<View style={{flex:1, backgroundColor: 'red'}}></View>
)
这里我将页面设置为沾满全屏，背景颜色为红色。
样式的设置也可以单独抽取到StyleSheet中去设置，这样更容易阅读。
const styles = StyleSheet.create({
mainStyles:{
flex:1,
backgroundColor: 'red'
},
这里遇到一个坑 应该是只有想我这样的新手才会碰到这样的傻瓜问题。
当时我根据文档在render方法中返回一个View组件
但是运行的时候一直报错，用我稀有的单词储备量来推算说的意思是字符串必须在Text组件中。 但是我明明返回的只是一个单纯的View组件啊。
运行报错
对照了下代码也没发现有啥不对。
class RNDemo extends Component {
// 当一个组件要显示的时候,就会自动调用render,渲染组件
render(){
return(
<View> </View>
)
}
}
就这两句代码 也不可能写错啊。真是百思不得七姐啊。后来观察和实例代码的差别发现貌似只有
<View> </View>这里的中间有一个空格的差别啊，遂删掉多余的空格，竟然真的人运行起来了。。真的是郁闷好久。 后来发现，关于这些UI组件。
可以这么写
<View style={styles.mainStyles}></View>
也可以
<View style={styles.mainStyles}>
</View>
但是就是不能 <View> </View> 你说气人不气人。。
timg.jpg
- 生命周期
我们都知道iOS的每个页面都有生命周期，而rn也不例外。
在组件初始化的时候调用，类属于我们OC的[[alloc]init]
constructor(props){
super(props)
}
// 组件将要被加载到视图之前调用
componentWillMount() {
}
// 当一个组件要显示的时候,就会自动调用render,渲染组件
render(){
return(
<View> </View>
)
}
//在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作
// 可以看做是oc中的ViewDidLoad
componentDidMount() {
}
// 当程序即将要卸载时会调用,类似于OC的delloc方法
componentWillUnmount() {
}
（这些只是没有数据更改时的调用顺序如果涉及到，State或者props发生改变时，则会触发其他的函数）
// 组件被更新之前会自动触发此函数 ，根据这个函数中返回值，来决定是否刷新页面。
// 如果返回false 则不会重新调用render函数，重新渲染页面
shouldComponentUpdate() {
return true
}
// 组件即将刷新的时候被触发，如果shouldComponentUpdate返回的是false 则不会回调此函数
componentWillUpdate() {
}
// 组件开始刷新
render() {
console.log('app输入')
return (
<div>
{this.state.name}
<Test />
<button onClick={this.renderText.bind(this)}>touch me</button>
</div>
);
}
// 组件刷新完成调用
componentDidUpdate() {
}
// 最后说下这个
// 当一个组件从父控件中接收到参数，如果这个子组件第一次存在于父控件中，不会执行这个函数。
// 只有当这个子组件再次存在于父组件上时才会触发
componentWillReceiveProps() {
}
另外说一个要点，创建
react-native组件时，组件名称首字母必须是大写的。被坑过。。。。
网友评论