ReactNative教程 — Hello React Native

下载此文件 http://www.jb51.cc/article/p-bixpgwtv-tr.html

前面文章已经介绍过了开发环境的搭建了.

注意: 你的电脑在有网络的情况下使用,使用离线初始化一个项目不在这个教程范围内,有兴趣可以一起探讨.

现在我们创建我们的一个 React Native 项目.
打开命令窗口: (自己切换到自己的工作空间,我的工作空间在当前位置下的 WorkSpaces)

cd WorkSpaces
react-native init HelloProject

初始化的之后的等待时候取决于你当前网络的情况.

Android 上运行项目

入门级的同事们电脑都是些老机器,所以在虚拟机上很消耗电脑内存,建议使用真机进行安装测试.

真机上运行项目

启动JS Server (在项目位置下 ~/WorkSpaces/HelloProject)
npm start
给 Android 项目打一个缺省的 js 文件(可不做,此步骤也是更新项目中 js 的一个方式) (在项目位置下 ~/WorkSpaces/HelloProject)
- 创建缺省文件,(没有缺省文件打 js 文件时会报错)
  - 切换文件夹位置到./android/app/src/main目录下
  - 创建文件夹assets
  - 切换到assets文件夹里面
  - 在文件夹下创建文件 index.android.bundle (注意扩展名也要一起改)
  - 在文件夹下创建文件 index.android.bundle.Meta (注意扩展名也要一起改)
- 运行生成 js 文件命令
```
react-native bundle --entry-file index.android.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --assets-dest ./android/app/src/main/res/ --dev false
```
使用AndroidStudio打开项目文件下的 android 目录 (如果是第一次使用 AndroidStudio 会有一个漫长的过程,因为 gradle 在下载依赖文件)
使用 AndroidStudio 将应用安装到手机上

初始化后项目结构

|- HelloProject | 项目工作空间
    |- android | android 端代码 
        |- app | app 模块
            |- build.gradle | app 模块 Gradle 配置文件
            |- progurad-rules.pro | 混淆配置文件
            |- src/main | 源代码
                |- AndroidManifest.xml | APK 配置信息 
                |- java | 源代码
                    |- 包名 | java 源代码
                        |- MainActivity.java | 界面文件,(加载ReactNative源文件入口)
                        |- MainApplication.java | 应用级上下文,(ReactNative 插件配置)
                |- res | APK 资源文件
        |- gradle | Gradle 版本配置信息
        |- keystores | APK 打包签名文件(如果正式开发需要自己定义修改签名文件)
        |- gradlew | Gradle运行脚本,与 react-native run-android 有关
        |- gradlew.bat | Gradle运行脚本,与 react-native run-android 有关
        |- gradle.properties | Gradle 的配置文件,正常是 AndroidHome,NDK,JDK,环境变量的配置
        |- build.gradle | Gradle的全局配置文件,主要是是配置编译 Android 的 Gradle 插件,及配置 Gradle仓库
        |- settings.gradle | Gradle模块配置
    |- ios | iOS 端代码
    |- node_modules | 项目依赖库
    |- package.json | node配置文件,主是要配置项目的依赖库,
    |- index.android.js | Android 项目启动入口
    |- index.ios.js | iOS 项目启动入口

其他文件夹没详细说明,不在目前介绍范围内.

Android 项目相关的知识不在今天的介绍范围,更多了解需要自己去了解

package.json

参考文献

{
  "name": "HelloProject","version": "0.0.1","private": true,"scripts": { "start": "node node_modules/react-native/local-cli/cli.js start","test": "jest" },"dependencies": { "react": "15.3.2","react-native": "0.36.0" },"jest": { "preset": "jest-react-native" },"devDependencies": { "babel-jest": "16.0.0","babel-preset-react-native": "1.9.0","jest": "16.0.2","jest-react-native": "16.0.0","react-test-renderer": "15.3.2" } }

dependencies

项目的依赖配置
依赖配置,配置信息配置方式
- “version” 强制使用特定版本
- “^version” 兼容版本
- “git…” 从 git版本控制地址获取依赖版本库
- “path/path/path” 指定本地位置下的依赖库
- “latest” 使用最新版本
- “>version” 会在 npm 库中找最新的版本,并且大于此版本
- “>=version” 会在 npm 库中找最新的版本,并且大于等于此版本
- “

devDependencies

开发版本的依赖库

version

js 版本标志

description

项目描述,主要使用于做第三方支持库时,对库的描述信息

main

项目的缺省入口

engines

配置引擎版本信息,如 node,npm 的版本依赖

index.*.js

正常只作为项目入口,不做其他业务代码处理

常用控件的使用

AppRegistry

react包

Component 控件基类
PropTypes Porps 类型用于声明 Componen的 props 值类型 (具体的使用后面会介绍)

react-native 包

AppRegistry
- JS运行所有React Native应用的入口
- AppRegistry.registerComponent 注册页面,让原生来调用
View
- 相当于 html 的 div
Text
- 用于介面显示文本
- 拥有点击事件
- 子 Text 会集成父Text Style
TextInput
- 文本输入框
TouchableOpacity
- 处理点击事件
Image
- 图片空间

常用 API

Alert
Dimensions
AsyncStorage
BackAndroid
Clipboard
PixelRatio
StyleSheet
- 定义样式

进一步学习的资源

ReactNative中文网 http://reactnative.cn/
ReactNative国际网最新的 ReactNative 的动态
ReactNative官方文档英文版,ReactNative中文网的翻译来自这
React官方文档
江清清个人博客 http://www.lcode.org/
艹大大个人博客 http://richardcao.me/
node第三方查找 https://www.npmjs.com
ReactNative第三方库查找 https://js.coach/react-native#content
《ECMAScript 6入门》阮一峰《ECMAScript 6入门》

ReactNative教程 — Hello React Native

ReactNative教程 — Hello React Native

Android 上运行项目

真机上运行项目

相关知识介绍

初始化后项目结构

package.json

dependencies

devDependencies

version

description

main

engines

index.*.js

常用控件的使用

AppRegistry

react包

react-native 包

常用 API

进一步学习的资源

猜你在找的React相关文章