02 React Native入门——Hello World

最新推荐文章于 2023-11-30 23:45:50 发布

X北辰北

最新推荐文章于 2023-11-30 23:45:50 发布

阅读量530

点赞数

CC 4.0 BY-SA版权

文章标签： react native react native示例 hello world

本文链接：https://blog.csdn.net/qq_35117024/article/details/89532604

本文简要介绍了使用React Native创建第一个应用“HelloWorld”的过程。从代码编辑器的选择到项目的搭建，再到代码的编写与调试，文章详细展示了如何在虚拟移动设备上输出HelloWorld。此外，还涉及了React Native的调试技巧及常见问题解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

每学一门语言，我们首先要做的第一个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开发套路差不多，在接下来的文章中我们详细介绍。