React-Native之HelloWorld

前言

• 之前就学习过一段时间的RN，但是却还没有系统的学完。发现时间久了，很多知识都快要淡了，最近上班比较闲，准备重新捡起来。以前没有写简书的习惯，主要的原因是词穷，加上本人比较懒(之前买过两本RN的书，现在不知道在哪垫桌角呢)。但是看到身边的同行都在发愤图强，我也不能落后太多了。

React-Native简介

• React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用。主要包含了以下主要特性：
  • 原生的iOS组件：
    React Native主张“Learn once, write everywhere”而非其他跨平台工具一直宣扬的“Write once, run everywhere”。通过React Native，开发者可以使用 UITabBar、UINavigationController等标准的iOS平台组件，让应用界面在其他平台上亦能保持始终如一的外观、风格。
  • 异步执行：
    JavaScript应用代码和原生平台之间所有的操作都采用异步执行模式，原生模块使用额外线程，开发者可以解码主线程图像、后台保存至磁盘、无须顾忌UI等诸多因素直接度量文本设计布局。
  • 触摸处理：
    React Native引入了一个类似于iOS上Responder Chain响应链事件处理机制的响应体系，并基于此为开发者提供了诸如TouchableHighlight等更高级的组件。

编辑器

• 关于编辑器这个问题，最开始我用的是Webstorm，它的正式版是要收费的，虽然用的是破解版，但是发现用起来并不是那么爽，每次打开工程都好慢(可能是电脑性能问题)。后来发现了另一款非常不错的编辑器Atom，一款轻量级但功能十分强大的前端开发工具。
• 安装插件，File ---> Setting --> Install，可直接搜索。在这里推荐几款常用插件：
  • simplified-chinese-menu ：一款汉化插件
  • color-picker : 用于颜色取值，支持多种格式；
  • atom-ternjs ：一款代码提示的插件

初始化项目

• 打开终端，输入以下命令

react-native init HelloWorld

如果想要指定react-native的版本的话可以使用如下命令

rninit init HelloWorld --source react-native@0.44.0

• 项目初始化完毕时，会自动创建iOS和Android工程，和对应的JS文件，index.ios.js，index.android.js。并且通过Npm加载package.json中描述的第三方框架，放入node_modules文件夹中
• 打开iOS工程，查看AppDelegate.m文件，查看程序启动完成：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  // 获取js文件url
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  // 加载控件，moduleName不能乱传，必须跟js文件中注册的模块名字保持一致
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"HelloWorld"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  // 创建窗口
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  // 创建窗口根控制器
  UIViewController *rootViewController = [UIViewController new];
  // 设置根控制器的视图
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  // 显示窗口
  [self.window makeKeyAndVisible];
  return YES;
}

• 用Atom打开工程，查看index.ios.js文件

// ES6写法
// 1.加载React,Componet组件
import React,{compoent} from 'react'

// 2.加载原生组件
import
{
    AppRegistry,
    StyleSheet,
    View,
    Text
}
from 'react-native'

// 3.自定义组件,作为程序入口组件
export default class ReactDemo extends Component {
    // 当加载组件的时候,就会调用render方法,去渲染组件
    render(){
        return (
             <View style={styles.container}>
                <Text style={styles.welcome}>
                  HelloWorld
                </Text>
             </View>
        )
    }
}

// 4.创建样式表
// 传入一个样式对象,根据样式对象中的描述,创建样式表
var styles = Stylesheet.create({
    container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgba(15, 148, 32, 0.98)',
  },
  welcome: {
          fontSize: 20,
          textAlign: 'center',
          margin: 10,
  },
})

// 5.注册组件,程序入口
// 第一个参数:注册模块名称
// 第二个参数:函数, 此函数返回组件类名, 程序启动就会自动去加载这个组件
AppRegistry.registerComponent('ReactDemo',()=>ReactDemo)

• GitHub地址：https://github.com/AnswerXu/React-Native.git