RN(react native)入坑指南-06,项目开发结构(代码分层组织)

随着代码复杂性增加,RN项目的代码分层和结构变得重要。本文介绍了以业务模块和页面划分层级的方式,展示了包括index.ios.js、index.android.js、src、module等在内的项目目录结构,并强调了样式文件与业务模块同级存放的原因,便于引用。通过示例说明了样式类的书写和导入方式。
摘要由CSDN通过智能技术生成

随着代码复杂性的提高,对代码进行分层以及抽象是十分必要的.今天我们就对RN的项目结构进行简单的梳理.
  这里主要是对样式文件和组件进行分离.可以以业务模块或者以页面的形式划分层级.具体结构如下
  

  • [ ] Project ROOT
    • [ ] index.ios.js
    • [ ] index.android.js
    • [ ] android
    • [ ] ios
    • [ ] resources – 存放各类静态资源文件
    • [ ] src – 源代码目录
      • [ ] module –业务模块
        • [ ] module.js – 业务模块组件
        • [ ] module.style.js – 业务模块样式


目前关于RN的分层结构没有特定的最佳实践,大家可以根据自己的理解进行组织.
这里之所以将样式文件与业务模块同级存放主要是由于在import的时候from语句后面的参数是依据当前文件所在的相对路径进行查找,存放在同级目录可以比较方便的进行引用.Login.js中如果需要引入Login.style.js可如下书写
Module.js

'use strict'

import React,{View,Text} from 'react-native'

{
  /**这里styles是引入后的别名,可以在需要的地方以styl
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值