React Native Hello World

上一篇搭建好了React Native开发环境，那么这一篇自然是按照传统新建Hello World工程咯！

废话不多说，直接开干

1. 直接进入Windows的powershell，切换到你要新建工程的目录下，我的是这么写的：
   cd G:\DeveloperKits\ReactNative
2. 然后就可以新建工程了，新建一个HelloWorld工程：
   react-native init HelloWorld
3. 切换到工程目录下：
   cd G:\DeveloperKits\ReactNative\HelloWorld
4. 这个时候我们就可以修改我们的代码了，这里介绍一款编辑器,微软的Visual Studio Code,用起来还是不错的，而且它还支持React Native，点击下载吧。这时我们就可以用Visual Studio Code打开我们刚刚新建的HelloWorld工程，如图所示：
   
5. 打开项目根目录下的index.android.js文件，然后将里面的代码修改为如下所示，代码的具体含义，自己看文档吧

   import React, { Component } from 'react';
   import {
       AppRegistry,
       Image,
   } from 'react-native';
   class HelloWorld extends Component {
     render() {
     let pic = {
     uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
   };
     return (
      
      );
     }
   }
   AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
   

有几个注意点要说一下：

其他的看React Native中文网的文档，我就不多说了。

1. 修改完之后，我们就在powershell中react-native start运行packager，新打开一个powershell窗口，同样切换到工程目录下react-native run-android运行工程到模拟器上，然后我们看到了这个样子：
   
   那如果我们修改了代码后，难道要再重新执行一次react-native run-android？当然不是，那React Native的调试要怎么做呢，只需点击模拟器的菜单键就会弹出一个菜单，然后点击Reload，模拟器就会显示修改代码后的界面了，这是不是很方便呢！
   
   这里我遇到一个很蛋疼的问题，不管我怎么点Reload界面都不刷新，后来Google之后才遭到答案，原来需要设置一下，把项目路径\node_modules\React-native\node_modules\node-haste\lib\FileWatcher\index.js中的MAX WAIT_TIME值改得更大一些，比如把120000改成360000，然后我再reload的时候界面就刷新了，具体原因请看这里blog.csdn.net/u012649246/…
   实验一下，把代码中图片的Uri改一下改成http://ofevvhaxu.bkt.clouddn.com/avatar_500x500.jpg，看看效果，点一下reload
   
   OK，刷新成功了。
   

后记，文章内容讲的不深，还有很多东西都没有讲到，两篇博客讲了环境搭建，新建hello world工程，万事开头难，我们已经把第一件事做好了，剩下的就看看React Native中文网的文档吧，自己再敲一敲代码，学会React Native不难。

参考文章React Native中文网