2 - React Native从入门到入土 Hello world

从老规矩开始我们开始写一个Hello world

0.找到昨天创建的工程把它到放到你一个你轻而易举能找到的地方

1.利用webStom打开index.ios.js

0D13B353-FC79-4A3B-BE1C-14F319C71799.png

打开之后看到的是这样的界面

1768C0CF-30E2-45B6-A38F-55C49065B734.png

我们先来看下目录结构

主要的模块有以下几个：

android文件夹,这里是 android 工程的源代码，我们可以使用android studio 打开这个文件夹

ios文件夹，这里是 iOS的项目工程的源代码，可以用xcode打开

node_modules ，是react-native工程用到的模块

index.android.js 是android的 页面的内容，主源代码文件，android界面的入口

index.ios.js 是ios 的 页面的内容，主源代码文件，ios界面的入口

package.json 工程描述文件

现在我们主要在index.ios.js写代码

我们发现这里是和模拟器是相对应的,改下这里看看会不会有什么变化

在index.ios.js 把Welcome to React Native!改成 Hello world,别忘记了右上角按钮编译下:

132D6256-596E-4A8A-B87B-9F4F5853921D.png

2用Xcode打开iOS工程,编译 - 运行模拟器

C89B508E-0B84-4D54-B558-0DB22460B8E4.png

3至此第一个Hello world 已经完成了

DDCD8558-D460-4370-9C74-BFB9A8AF95D0.png