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

有问题请参考 <https://blog.csdn.net/jinmie0193/article/details/81171029>

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

效果展示：

热门工具换一换