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
效果展示: