文档章节

ReactNative 开发基本项目架构

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

ReactNative 开发基本项目架构

前置知识点

Navigator

Navigator可以让你在应用的不同场景(页面)间进行切换。
Navigator通过路由对象来分辨不同的场景。
利用renderScene方法,Navigator可以根据指定的路由来渲染场景。
可以通过configureScene属性获取指定路由对象的配置信息,从而改变场景的动画或者手势。

常用方法
  • getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop掉的那些。
  • jumpBack() - 跳回之前的路由,当然前提是保留现在的,还可以再跳回来,会给你保留原样。
  • jumpForward() - 上一个方法不是调到之前的路由了么,用这个跳回来就好了。
  • jumpTo(route) - 跳转到已有的场景并且不卸载。
  • push(route) - 跳转到新的场景,并且将场景入栈,你可以稍后跳转过去
  • pop() - 跳转回去并且卸载掉当前场景
  • replace(route) - 用一个新的路由替换掉当前场景
  • replaceAtIndex(route, index) - 替换掉指定序列的路由场景
  • replacePrevious(route) - 替换掉之前的场景
  • resetTo(route) - 跳转到新的场景,并且重置整个路由栈
  • immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
  • popToRoute(route) - pop到路由指定的场景,在整个路由栈中,处于指定场景之后的场景将会被卸载。
  • popToTop() - pop到栈中的第一个场景,卸载掉所有的其他场景。

Redux

  • 因后面有专门讲 Redux 的, 所以这次的教程不讲Redux 相关的知识,以减少复杂,有利于理解.

项目结构约定

  • 因为 js 并没有包名或着说命名空间, 所以我们以文件夹来作为命名空间的划分
  • 命名空间使用单数单词,或自定义单词来命名,并且是是小写的
  • 命名空间的划分不要按界面流程来划分, 按模块处理的功能来划分
  • src 下命名空间竟然不要超过3层
 |- src 业务 JS 源代码
    |- action | 动作层
    |- reduer | 数据处理层
    |- common | 公共 
    |- component | 组件
    |- constant | 常量 
    |- img | 图片资源
    |- module | 原生支持模块
    |- untils | 工具类
    |- view | 页面
    |- app.js | 项目 js 入口,面对于项目, (有别于 index.*.js,面向于原生调用)
  • 模块名都是使用大写开头的驼峰式命名
  |- common
    |- Immutables.js
    |- Reducers.js
    |- Request.js
    |- Response.js
    |- Toasts.js
  |- components
    |- ActivityIndicator.js
    |- CheckBox.js
  • Component 的 propType, defaultProps 要写class 里面

(未完待续)

进一步学习的资源

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

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

卖女孩的小火柴

粉丝 3
博文 25
码字总数 124
作品 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开发 ...

枣泥布丁
2018/07/12
0
0
ReactNative与iOS原生交互方式汇总

前言 最近用RN开发SDK,涉及RN与iOS各种交互。 有些交互比如用iOS原生切换多个RN页面,以及iOS调用RN的方法,按照网上的方法调不通,一度不知如何是好,网上资料比较少。 于是自己看RN源码分...

大灰狼的小绵羊哥哥
2018/11/13
0
0
Swift已有项目手动集成ReactNative

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

LvesLi
2018/06/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MIT 6.828 main.c文件分析

#include <inc/x86.h>#include <inc/elf.h> /*这是一个简单粗略的boot loader,它唯一的工作就是从硬盘的第一个扇区启动格式为ELF的内核镜像硬盘布局这个程序(包括boot.S和mai...

FeanLau
1分钟前
0
0
SpringBoot 整合 Redis

1. pom.xml 文件中添加 Redis 依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><exclusions><exclusio......

北漂的我
9分钟前
0
0
TechDay实录 | 认识PaddlePaddle:更低使用成本、更高开发效率的深度学习框架

导读: 在人工智能时代,各行各业都在尝试利用机器学习/深度学习等前沿技术来解决自身的业务需求,深度学习框架也应运而生。为了继续帮助AI开发者们在深度学习的道路上快速升级,百度PaddleP...

PaddleWeekly
10分钟前
3
0
JAVA AES加解密服务

package com.pasenger.aes;import lombok.Data;import org.apache.commons.codec.binary.Base64;import org.springframework.beans.factory.InitializingBean;import org.springframewo......

Pasenger
21分钟前
0
0
SpringCloud集成 Mybatis分表插件shardbatis 踩坑日志及其原理分析

公司新开发的系统数据量过大,需要进行分表处理,我在网上浏览一圈,选中了Shardbatis,原因有二: 1.公司项目本身集成了Mybatis,而Shardbatis是其插件,引入方便; 2.Sharbatis十分轻便,只...

L墨龙
28分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部