RN,一起写HelloWord

RN,一起写HelloWord_第1张图片
Paste_Image.png

看到标题,相信大部分小伙伴都笑了,无奈啊... 上篇文章中,跟小伙伴已经分享了我自己的react-native开发环境配置,结合这些IDE,我们今天就简单的来看下react-native究竟是个什么鬼。


  • 利用iterm2或者终端,在需要的目录路径下来创建我们第一个工程:
    react-native init HelloWorld
RN,一起写HelloWord_第2张图片
init_project.png

上面即是创建成功的截图,过程可能有点慢,要耐心等待会。其中的npm就是是随同NodeJS一起安装的包管理工具,我们所创建的工程也是由它来进行管理。

  • 初始化好工程后,我们首先打开工程目录(命令行:open .即可)
    来看下大致结构:
RN,一起写HelloWord_第3张图片
Paste_Image.png

我们可以看下init都做了些什么。
在终端工程目录下,输入:
npm list
在输出内容中列出了从网络下载的依赖包及其版本号。
需要注意的一点是,RN在init时将项目需要用到的依赖包下载到当前目录下的mode_modules目录中,如果这些依赖包有了新的版本,当前目录下的这些依赖包并不会自动更新。

剩下的很直白的我们就不啰嗦介绍了,在这里我们可以看到.js两个文件,以后对应客户端的开发即是在这文件上进行操作。

打开index.iOS.js文件(我的默认是Sublime),将原有代码清除,写入下方代码块:

 import React, { Component } from 'react';
 import { AppRegistry, Text } from 'react-native';
 
 class HelloWorldApp extends Component {
   render() {
     return ( Hello world! ); 
  }
}
 // 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
 AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

你可以通过终端在工程目录下使用react-native run-ios或Xcode运行查看我们的第一句RN。
...............

你可能感兴趣的:(RN,一起写HelloWord)