ReactNative 开发基本项目架构
ReactNative 开发基本项目架构
卖女孩的小火柴 发表于1年前
ReactNative 开发基本项目架构
  • 发表于 1年前
  • 阅读 19
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

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 里面

(未完待续)

进一步学习的资源

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
卖女孩的小火柴
粉丝 3
博文 25
码字总数 124
×
卖女孩的小火柴
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: