In large React Native projects, it’s common to have long relative import paths like:

import MyComponent from '../../../screens/MyScreen/MyComponent'

With import paths that go up and down the folder hierarchy like that, it can be confusing to figure out which file or folder you’re actually importing, and it generally just looks messy to have several of those import statements at the top of your file.

Instead, we can convert relative import paths to absolute import paths by creating a new package.json file at any level of the folder hierarchy. That package.json file needs to specify a name that you want to call that folder:

{ "name": "screens" }

And then you can begin your import statements with that new module name:

import MyComponent from 'screens/MyScreen/MyComponent'

Note that this only works for React Native projects, and not other npm based projects like create-react-app web apps.

[React Native] Reduce Long Import Statements in React Native with Absolute Imports的更多相关文章

  1. React Native v0.4 发布,用 React 编写移动应用

    React Native v0.4 发布,自从 React Native 开源以来,包括超过 12.5k stars,1000 commits,500 issues,380 pull requests ...

  2. 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处

    因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...

  3. React躬行记(16)——React源码分析

    React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版 ...

  4. react hooks 全面转换攻略(一) react本篇之useState,useEffect

    useState 经典案例: import { useState } from 'react'; function Example() { const [count, setCount] = useS ...

  5. React躬行记(15)——React Hooks

    Hook(钩子)是React v16.8新引入的特性,能以钩子的形式为函数组件附加类组件的状态.生命周期等特性.React的类组件有难以拆分.测试,状态逻辑分散,难以复用等问题,虽然可以通过渲染属性( ...

  6. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  7. 基于Abp React前端的项目建立与运行——React框架分析

    基于Abp React前端的项目建立与运行 目录 基于Abp React前端的项目建立与运行 1 Abp项目配置 2 运行WebApi后端项目 2.1 创建C3D数据库,并且将数据库对应链接字符串替换 ...

  8. 从 React 原理来看 ahooks 是怎么解决 React 的闭包问题的?

    本文是深入浅出 ahooks 源码系列文章的第三篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本文来探索一下 ahooks 是怎么解决 React 的闭包问题的 ...

  9. React.js入门笔记(续):用React的方式来思考

    本文主要内容来自React官方文档中的"Thinking React"部分,总结算是又一篇笔记.主要介绍使用React开发组件的官方思路.代码内容经笔者改写为较熟悉的ES5语法. ...

随机推荐

  1. C++ this指针 全部

    在每一个成员函数中都包含一个特殊的指针,这个指针的名字是固定的.叫做this.它是指向本类对象的指针,它的值是当前被调用的成员函数所在的对象的起      始地址.例如:当调用成员函数a.volume ...

  2. linux的shell函数参数

    在Shell中,调用函数时可以向其传递参数.在函数体内部,通过 $n 的形式来获取参数的值,例如,$1表示第一个参数,$2表示第二个参数... 带参数的函数示例: #!/bin/bash funWit ...

  3. UILabel垂直方向显示(上下的顺序显示)。

    NSString* text = @"一"; NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFont ...

  4. MySql c#通用类 转

    using System;using System.Data;using System.Configuration;using System.Collections.Generic;using Sys ...

  5. 关于jquery的clone()和javascript的cloneNode()

    区别: jquery的clone( ),如果是true就是深克隆,把事件都会克隆过去:如果是false,则仅仅克隆的是结构: javascript的cloneNode( ),如果是true,会将子节点 ...

  6. jQuery中容易让人困惑的东西

    前言:jqueryt很灵活,太灵活了,可以说是他一个优点,也是他一个缺点,达到一种效果,十个人也许会用十种不同的方法来实现这个过程,结果一样,过程不一样,这到底是好,还是坏呢. 一,什么是jquery ...

  7. ROS:Nvidia Jetson TK1平台安装使用ROS

    原文连接: http://wiki.ros.org/indigo/Installation/UbuntuARM Ubuntu ARM install of ROS Indigo There are c ...

  8. CVPR2015深度学习回顾

    原文链接:http://www.csdn.net/article/2015-08-06/2825395 本文做了少量修改,仅作转载存贮,如有疑问或版权问题,请访问原作者或告知本人. CVPR可谓计算机 ...

  9. Scala: Types of a higher kind

    One of the more powerful features Scala has is the ability to generically abstract across things tha ...

  10. C# tostring("0000000")

    public string ConverNo(string str) { string result = ""; ]; ; i < chars.Length; i++) ch ...