(十六)ReactNative 中获取当前文件的相对路径和相对路径

在 React 中如何后获取当前文件的绝对路经和相对路径

使用RN来写iOS或者android 时，想和原声工程项目的目录 来清楚工程模块 ，在使用每个js  文件时通过require 引用当前要使用模块

为了后期的维护和管理，面对这一些通过绝对路径或相对路径引入的模块，真不知如何下手。

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TabBarIOS,    NavigatorIOS} from 'react-native';let  Firstpage = require('../../FirstItem/FirstPage');let SecondPage = require('../../SecondItem/SecondPage');let Accountpage = require('../../AccountItem/AccountPage');var iconArray = [require('../images/first.png'),require('../images/second.png'),require('../images/account.png')];var selectedIconArray = [require('../images/first_select.png'),require('../images/second_select.png'),require('../images/account_select.png')];var titleArray = ["首页","理财","账户"];let tintColor = "#ff6622";

ReactNative 是基于React的，React 是基于Javascript  的ES6进行的封装 需要首先了解阮一峰的博客的require()  源码解读

一、Component文件夹

首先，假设我们把组件放在Component这个文件夹中 

二、main.js到index.js

我们可以写一个main.js文件，里面这么写 
main.js

var Component = {    BorderBtn:require('./BorderBtn/BorderBtn');    YYNewTopBar:require('./YYNewTopBar/YYNewTopBar');}module.exports = Component;
1
2
3
4
5
6
1
2
3
4
5
6

然后在其他地方通过下面这行代码

var {BorderBtn, YYNewTopBar} = require('./路径/Component/main.js')，
1
1

取得main.js里面的组件。最基本的用法就是这样。

不过如果你觉得这样不爽，因为这样就不是一个包了，在node里面多个子文件再加上其他配置文件一起组成一个包（package），所以如果我想不引用main.js，像下面这样：

var {BorderBtn, YYNewTopBar} = require('./路径/Component')，
1
1

那么，把main.js的文件名改为index.js就可以了，当你引用整个文件的时候node会自动加载index.js中的内容。

其实就是这么简单，我们以后在引用的时候再也不用去看这些文件在哪里，然后一个个去引用，直接导入一个Component，然后做解构就好了。

还有个可以自定义入口文件的办法，但是要写一下package.json这个文件。这种方法我测试的时候通不过，所以没有深究，现在这种做法就能让我重构代码的时候得心应手了。

官方也是这种做法，只不过官方会利用npm来增加一些其他的依赖，乃至于整个工程利用npm install后可以加载完整个工程。