React Native项目组织结构介绍

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://xiangzhihong.blog.csdn.net/article/details/52692922

代码组织:

目录结构:

.
├── components    //组成应用的各个组件
│   ├── Routers.android.js     //每个组件若实现不一样,分为android的实现和ios的实现。
│   ├── Routers.ios.js
│   ├── common     //公共组件
│   ├── issues        //议题页面
│   ├── navigation  //导航组件,android用侧边栏,ios准备用tab
│   └── project      //项目页面
└── network    //网络服务
    └── DataService.js
  1. 我自己的代码全部放在src目录下,这样写代码过程中搜索啊什么操作比较方便,从逻辑上也比较清晰。

  2. react的应用,是用自定义组件或原生组件层层嵌套而成的。因此我将整个应用划分为组件部分(组成各个页面)和一些其他服务(目前比较简单,只抽象出发get请求的网络服务)。

  3. components内,根据自己的业务逻辑进行抽象,把整个应用划分为层层嵌套的组件,目录结构的组织形式基本就是我页面的组织形式。如果有一些比较通用的功能,可以提取成公共组件,我放在common目录下。

  4. 每个组件如果ios和android的实现不太一样,则创建两个文件,如Routers.android.jsRouters.ios.js

基本逻辑:

  1. 根组件:
    我定义了一个Routers组件,作为整个app的根组件。Router组件实际上包装的官方的Navigator组件,主要作用:

    • 负责整个app的所有路由,当使用navigator去跳转路由时,会最终进入renderScene函数来渲染不同的页面。

    • 提供了默认router,整个程序启动时,默认加载页面ProjectList

  2. 各个页面:不同路由对应不同的页面,如RoutersrenderScene函数中,每个if分支是一个页面。这些页面实际上就是一个个导出的组件。比如ProjectList组件是用来做项目列表的,但他自身又包含了一个用来渲染每个项目单元格的projectCell组件。如此,所有组件都是对上层呈现成一个统一的组件接口,对下层自己去组装多个不同组件,最终形成一个模块化的统一的app。

  3. 组件之间的关联:组件之间经常会发生关联。我自己用到了以下情况:

    • 父改变子:

      • 子通过state对外提供接口,父可以通过setState去改变子的状态,并让子重新渲染。state是React的一个很重要的概念。在组件上可以设一些属性,这些属性都有一个初始状态,然后用户的操作产生交互,只要是用setState去触发这个组件状态变化,则会触发这个组件重新渲染 UI 。

      • 父直接调用子导出的方法,比如官方组件DrawerLayoutAndroid提供的openDrawer方法。可以使用react的refs机制去调用。比如我在NavTab组件的openNavDrawer函数中,以this.refs['drawer'].openDrawer();这样的函数方式去调用。那么如何像这种方式导出自己的方法供父组件直接以函数方式调用?注意导出的方法必须是作为类方法就可以了,比如openNavDrawer这个函数就是导出给父用的。

    • 子调用父:
      这其实有点类似是反向依赖的设计模式。就是子提供触发回调的接口,但是究竟是触发后执行什么,子并不关心。比如我封装的NavToolbar(就是很多界面上面的工具条)组件的onClicked方法。

    • 很多地方的按钮都是返回上一级。
      <NavToolbar ... onClicked={() => {this.props.nav.pop();}} />
      但是最底层的几个界面上的按钮,换成了弹出侧面导航条,以供切换。
      <NavToolbar ... onClicked={this.onToolbarClicked} />
      对于这种情况,导航条要想抽象成公共的组件,他就不能依赖于他的父究竟是哪个界面。触发的具体动作就需要通过回调注入进来,这时就用这种方式。
    • 兄弟关系:
      在共同的父中组合上面两种情况就可以了。比如ProjectList.android.js

    • onToolbarClicked:  function (){
        this.refs['navTab'].openNavDrawer();
      },
      <NavTab ref='navTab' nav={this.props.nav}>
        <NavToolbar icon={"ic_menu_white"} title={'项目'} onClicked={this.onToolbarClicked} />
        {content}
      </NavTab>
    • 其他情况:
      参考这篇文章,不过目前我还没用到这种毫无关系的事件触发,所以尚未研究。

调试

  1. chrome调试:
    安装react dev的chrome官方插件。在手机上设置host的ip,点击start chrome debugging。 chrome会自动跳转到调试地址,在浏览器上打开调试窗口,会发现里面多了一个react页签。

  2. inspect元素:在模拟器中打开inspect element面板,点击模拟器中的元素,chrome会跳转到对应dom。

  3. 槽点:

    • 在浏览器改动css后,模拟器的布局不跟着更新。注意每个dom都有个RN的包裹,需要更改这个以RCT开头的包裹元素。参考issue

    • 浏览器的dom和手机上的元素位置对不准确。我有时会分不清哪个dom对应我屏幕哪一块。

    • 调试经常失效,调试窗口的react页签动不动就找不到了,我大部分时候是直接改代码,在模拟器看效果的。

遇到的坑:

  1. 模拟器中的程序经常崩溃,代码语法有低级错误,一但reload js,程序就有很大概率崩溃,需要react-native run-android重新开始。

  2. 换工程运行项目,react-native run-android 前最好关下后台,否则两个项目会互相影响。

  3. 出错提示很不完善。
    比如有时我会将<View>误写成<view>,或者忘记关闭标签。而这些低级错误,RN里面往往会非常难排除,提示往往都很奇怪,我都是靠走读代码发现。
    比如有一次,我看了ECMAScript 6 Features的语法后,将DataServicevar SERVER = 'http://www.yudianer.com/api';这句改成了const SERVER = 'http://www.yudianer.com/api';,当时没发现什么问题。但后面发现了奇怪的问题,只有在浏览器调试的时候,app才能正常运行,否则什么也不显示,而且没有任何提示。最后打包运行无数次都没反应,只能一点一点注释代码排除,才发现是我用了ECMAScript 6 Features,却没有配置。。。

  4. RN的有些组件有些限制,往往是后知后觉。例如:

    • DrawerLayoutAndroid这个组件外面不能再包一个<View></View>。如果你不幸这么做了,会整个页面不显示了,而没有任何提示。。。

    • 如果ListView包在一个View中,那么外面这个View需要设置style={flex: 1}。否则ListView将不能滚动。

    • 当遇到这种问题,最好去google一下,或去github看下有没有类似的议题。实在不行就通过注释代码的方法排除。

  5. JSX的语法经常搞错,跟一般的模板语言不太一样。比如:

renderProject: function(project){
    return(
      <ProjectCell
        onSelect={() => this.selectProject(project)}
        project={project}/>
    );
  },

我会经常忘记这是个函数,而直接写成:

renderProject: function(project){
      <ProjectCell
        onSelect={() => this.selectProject(project)}
        project={project}/>
  },

这看上去没什么,问题是这种类似错误的提示很奇怪,不好定位。

总结:

RN在android上确实不太完善,调试工具,错误提示,文档等都不是很友好。但去学习下还是挺酷的,而且在facebook不遗余力的推动,相信会越来越完善的。

展开阅读全文

没有更多推荐了,返回首页