React Native Hollo World

前面有文章介绍如何设置React Native的环境, 本文主要以一个例子入门.

通过初始创建项目

react-native init HelloWorld
 命令会生成一个项目文件夹. 项目中会生成这样 两个文件, 

index.android.js
index.ios.js
 和两个文件夹 

android
ios
 这两个文件即是安卓和iOS的入口文件. 以iOS为例, 在ios目录下能你能找到 

HelloWorld.xcodeproj iOS项目文件. 通过XCode找, 运行

HelloWorld例子, 删除原有ios.js中的代码, 加入以下代码

import React, {Component} from 'react';
import {
    Text,
    View
} from 'react-native';
 这里是库的引用. 加入: 

export default class HelloWorld extends Component {
    render() {
        return (
            <View style={MStyle.viewstyle}>
                <Text style={MStyle.textstyle}>
                    Hello Wolrd
                </Text>
            </View>
        )
    }
}
 这里定义了一个类

HelloWorld, render方法返回了一个View, 如果你对JS比较熟悉的话, 你会发现, 这里的return内容为什么不加引号? 对, 因为这是 jpx的写法, 其实与html写法类似. 这里View用到了MStyle样式.
var MStyle = StyleSheet.create({
viewstyle:{
flex: 1,
margin: 80
},
textstyle: {
flex: 1,
justifyContent: ‘center’
}
})
其实和css语法很相近 最后一步:

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
 这一步注册了在ios启动才能正确调用, 我们看ios delegate能发现 

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"HelloWorld"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
 好了, 运行起来.

Leave a Reply