React-Native 初体验

前言

这段时间，项目中某些模块尝试了下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组件时，组件名称首字母必须是大写的。被坑过。。。。

前言

猜你喜欢