文档章节

ReactNative教程 — Hello React Native

卖女孩的小火柴
 卖女孩的小火柴
发布于 2017/02/09 09:34
字数 1220
阅读 4
收藏 0

ReactNative教程 — Hello React Native

下载此文件http://blog.csdn.net/vispin/article/details/52981294

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

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

现在我们创建我们的一个 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 将应用安装到手机上

相关知识介绍

初始化完,打开工作目录下的项目文件夹(~/WorkSpaces/HelloProject)

初始化后项目结构

|- 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
    • 定义样式

进一步学习的资源

本文转载自:http://blog.csdn.net/vispin/article/details/52981294

共有 人打赏支持
卖女孩的小火柴

卖女孩的小火柴

粉丝 3
博文 25
码字总数 124
作品 0
厦门
其他
私信 提问
Swift已有项目手动集成ReactNative

背景 记得2017年处写过一篇公司放弃RN血泪史的经历,当时之所以放弃时因为前期投入过多人力物力研究,以至于第一版本耗时太多未见成效,所有被老板叫停。真是"常在河边走哪有不湿鞋"最近因为...

LvesLi
06/27
0
0
React Native跨平台移动应用开发框架介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/61423043 好久没有来更新博客了,给大家说声抱歉,人一旦懒惰起来连自己都害怕。可能...

Aduroidpc
2017/03/11
0
0
ReactNative学习笔记(一)

一.ReactNative 环境搭建 1.参考指南 reactnative.cn/docs/0.48/getting-started.html#content ReactNative 中文网,集成步骤详细,按步骤一步步来,这里就不赘述了。 2.遇到的问题 如果你按...

朱敏_ITer
2017/09/10
0
0
Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题

Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题 2018-07-12 10:29编辑: 枣泥布丁分类:程序人生来源:程序师 React Native弃用Udacity 招聘信息: iOS开发 ...

枣泥布丁
07/12
0
0
ITNews v0.0.5 更新,更改了页面布局,增加了收藏功能

ITNews是使用React Native开发的一个资讯类的APP,它只有资讯的列表,没有统计,没有推送,更没后台,是一款绝对纯净的资讯APP 你可以拿它来入门React Native,也可以安装它替换掉对应的官方...

朋也
2017/08/15
761
3

没有更多内容

加载失败,请刷新页面

加载更多

Nginx-使用简单总结

下载nginx:http://nginx.org/en/download.html 下载后解压 有很多种方法启动nginx (1)直接双击nginx.exe, 双击后一个黑色的弹窗一闪而过 (2)打开cmd命令窗口,切换到nginx解压目录下, 输入...

Java搬砖工程师
7分钟前
0
0
通过修改控制文件scn推进数据库scn

在数据库遇到ora-600[2662],scn不一致(又没有日志)的时候,我们首先想到的就是去推进数据库的scn,让数据库能够open起来,抢救其中的数据,但是由于各种乱用的情况,oraclescn的pach出来后(11.2...

突突突酱
8分钟前
1
0
Underscore _.template 方法使用详解

https://github.com/hanzichi/underscore-analysis/issues/26 前文 浅谈 Web 中前后端模板引擎的使用 我们简单了解了模板引擎在前后端的应用场景,本文重点深入 Underscore 的模板函数 _.te...

壹峰
9分钟前
0
0
前端缩短数字的长度解决方案[10进制转化为64进制]

function string10to64 (number) { var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_$'.split(''), radix = chars.length, qutient =......

未来cc
9分钟前
0
0
十年架构师不到400行手写一个Spring MVC

首先,我们先来介绍一下Spring的三个阶段,配置阶段、初始化阶段和运行阶段(如图): 配置阶段:主要是完成application.xml配置和Annotation配置。 初始化阶段:主要是加载并解析配置信息,...

小刀爱编程
10分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部