ReactNative-从UI开始

前言

学习一门新的技术，不管是小白还是老司机，最好的方法当然是边学边做。从移动端开发来说，要接触一个新的技术，像我这样的会开车但不是老司机的人，我选择先创建一个项目，然后从UI开始做起。

至于怎么搭建开发环境，怎么创建第一个项目，我就不在博客里写了(嫌麻烦^..^)。可以参考：中文官网 或者 不错的博客

此博文纯属新手福利！

一个简单的UI界面

此界面包含两个View和两个Text。够简单吧！

代码分解

视图加载顺序：

iOS代码中的控制器的View中加载index.ios.js；（OC和js关联的重要一步，官方历程中是在AppDelegate中加载index.ios.js，效果一样）index.ios.js加载LGview.js；LGview.js就是界面上展示的视图。

先看OC加载js：

- (void)viewDidLoad { [super viewDidLoad]; NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation                                                            moduleName: @"hello"                                                      initialProperties:nil                                                        launchOptions:nil]; [self.view addSubview:rootView];     rootView.frame = self.view.bounds;  } 没错，就是在viewDidLoad里面加载。上面的代码实际上是引用了index.ios.js文件，然后index.ios.js文件里面注册相应视图。这个基本是固定写法，@"http://localhost:8081/index.ios.bundle?platform=ios"是React Native开发服务器地址，这个会访问到index.ios.js文件。@"hello"是工程名。

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];

可以替换为

NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

这是两种访问方式。

index.ios.js实现：

import React, { Component, } from 'react'; import { AppRegistry, } from 'react-native'; import LGview from './Views/LGview'; AppRegistry.registerComponent('hello', () => LGview); 它注册了LGview.js，LGview.js中实现视图展示。代码中的import很神奇(import LGview from './Views/LGview';)，和OC中的#import不同的是，它直接就实例化好了,"LGview"直接拿来使用。

LGview.js实现：

import React, { Component } from 'react'; import { View, Text, StyleSheet, } from 'react-native'; class LGview extends React.Component { constructor(props) { super(props); }; render() { return ( <View style={styles.first_view}> <View style={styles.second_view}> </View> <Text style={styles.titleBase}> I am root text! <Text style={styles.title}> I am chid text! </Text> </Text> </View> ); } } var styles = StyleSheet.create({ first_view:{ flexDirection:'row', backgroundColor:'gray', height:100, padding:20 }, second_view: { backgroundColor:'red', flex:1 }, title:{ color:'green', fontWeight:'bold', }, titleBase:{ margin:10, textAlign:'center', color:'red', fontSize:18, fontFamily:'Cochin', }, }); //向外公开，别的地方就可以调用了 export default LGview; 上面代码中采用StyleSheet来进行书写控件的的布局，这样的话，我们的代码会更加的清晰以及便于维护了。其实React Native开发也更加推荐这种方式。

灰色view嵌套红色view和text，两个Text也有嵌套关系。联想OC中的addSubView，js中被嵌套的view实现代码写在父view实现代码的中间就好了。

从这个工程开始我们的ReactNitive之旅吧！