前言
- 之前就学习过一段时间的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等更高级的组件。
- 原生的iOS组件：
编辑器
- 关于编辑器这个问题，最开始我用的是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)
网友评论