02 React Native入门——Hello World

简介

        每学一门语言，我们首先要做的第一个demo就是“Hello World”，不做对不起这门语言、对不起代码编辑器，哈哈，废话不多说了，这篇文章就用很少的文字来介绍下如何编写我们的Hello World吧。

操作步骤

1、用我们经常用的前端代码编辑器来打开上文中我们创建的项目“myfirstapp”，在这里我用的是webstorm，如图：

2、然后打开项目目录下的App.js文件，我们修改此文件的代码，然后在我们的虚拟移动设备上输出Hello World。将下面的代码拷贝替换到App.js里：

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <Text>Hello, world!</Text>
            </View>
        );
    }
}

        上述代码如果是学习过react的伙伴们会很熟悉，它就是react的语法，熟悉的import、熟悉的export default、熟悉的JSX……

        如果没有学习过react的伙伴也不用太担心，我们接下来的文章也会介绍这种JSX的写法，只要你有ES6的基础，掌握它并不是难事。

3、代码编写（复制/粘贴）好之后，我们在虚拟移动设备界面连续按两次R键，然后在出现的菜单界面选择【reload】，界面就会刷新，如下：

注意：在虚拟设备屏幕连续按两次R键然后选择reload的时候屏幕可能会出现红屏，然后报错，这是因为你还要在项目根目录下打开命令行，运行命令“react-native run-android”，好了，最后我们再重新执行连续R键和reload操作，就可以看到运行结果啦。

总结

        本来这节是不打算写的，但是觉得新学一门开发技术，不写个Hello World感觉对不起自己，所以最后还是写了本文。这篇文章虽然比较简短，但是里面关于react native程序的调试及调试中出现的问题做了一下介绍。而且通过短短的一个Hello World实例，大家可能感觉到react native开发的套路了吧，其实它和react开发套路差不多，在接下来的文章中我们详细介绍。