RN入门基础1：第一个RN项目-hello World

1.新建工程，用webStorm创建一个react native项目

首先打开package.json,

因为webstorm会创建rn项目时会下载最新的react-native，所以运行程序到模拟器上，经常会出现各种红屏，

所以，将package.json的内容替换如下（里面是稳定版本的react-native和react-native cli）

{
  "name": "myprojectname",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4"
  },
  "devDependencies": {
    "babel-jest": "23.4.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.4.1",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

然后点击左下角的install

有问题请参考

2.配置文件package.json,程序入口代码文件App.js和index.js

基本代码分为四部分

1）组件导入区：     所有用到的组件都需要事先进行导入，包括样式也需要进行导入
2）核心代码区：     所有逻辑代码编写的地方
3）组件样式区：     render方法中返回一些用于渲染结构的JSX语句，render() 方法中用到的组件在这里编写
4）注册启动组件： 组件只有注册后才能运行。这里用到的 AppRegistry 也需要在组件导入区进行导入

注册并启动组件在index.js文件中，index是 Android 手机和 iOS 手机上程序开始的入口

代码解释：

定义了一个名为 myprojectname 的新的组件（Component），

 并且使用了名为 AppRegistry 的内置模块进行了“注册”操作

 AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。

AppRegistry.registerComponent这个方法只会调用一次。只需整个复制到index.ios.js或是index.android.js

效果展示：