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开发套路差不多,在接下来的文章中我们详细介绍。

发布了112 篇原创文章 · 获赞 109 · 访问量 24万+

猜你喜欢

转载自blog.csdn.net/qq_35117024/article/details/89532604