ReactNative-从UI开始

来源：互联网发布：win10 禁止安装软件编辑：程序博客网时间：2024/05/24 01:44

前言

学习一门新的技术，不管是小白还是老司机，最好的方法当然是边学边做。从移动端开发来说，要接触一个新的技术，像我这样的会开车但不是老司机的人，我选择先创建一个项目，然后从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之旅吧！

0 0