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