React native 生成资源清单文件

在开发中,我们时常要引用很多资源,比如图片,字符串,颜色等等，

react 这个引用方法 import和require 必须传递相对路径,不便于移动应用开发,本人实在受不了这种引用方式,而且require加载图片,不能是变量,很烦人,我给出一种映射解决办法

上面这种图片引用方式实在太痛苦,我给出一种优雅方案,动态产生资源清单文件:
第一步:在项目根目录新建一个init.js文件

第二步:在init文件中加入代码:
 

/**
 * @author youxuan  E-mail:[email protected]
 * @Description
 * @Company Beijing dsb
 */
//获取项目工程里的图片
var fs = require('fs');//引用文件系统模块

//小心勿动
gennerateResource('Resource.ts');


/**
 * 生成清单
 */
function gennerateResource(fileName) {
    var notice = `\n//!!!!!代码自动生成,请勿手动修改!!!!!\n`;
    var content = `\n/**\n* @author youxuan  E-mail:[email protected]\n* @Description 资源清单\n*/\n`;

    var images = `${listImages("./react_native/imgs")}`;
    var strings = `export const String={\n${listStrings("./react_native/res/strings")}\n};`;
    var colors = `export const Color={\n${listColors("./react_native/res/colors")}\n};`;
    var values = `export const Value={\n${listDimen("./react_native/res/values")}\n};`;

    content = `${content}
    \n${notice}\n${images}
    \n${notice}\n${strings}
    \n${notice}\n${colors}
    \n${notice}\n${values}`;
    fs.writeFile(fileName, content, function (error) {
    })
}


/**
 * 列出图片清单
 * @param dirPath
 * @param fileName
 * @returns {string}
 */
function listImages(dirPath) {
    var content = ``;
    var files = fs.readdirSync(dirPath);
    files.forEach(function (itm, index) {
        if (!(itm.includes('@2x') || itm.includes('@3x'))) {
            content = `${content}\nexport let ${itm.replace('.png', '')}=()=>require('${dirPath}/${itm}');`;
        }
    });
    return content;
}

/**
 * 列出所有的字符串
 * 1个目录对应多个string.json文件
 *  1.需要解决声明重复问题
 *  2.需要不同的命名空间
 * @param dirPath
 */
function listStrings(dirPath) {
    let stringResource = '';
    var files = fs.readdirSync(dirPath);
    files.forEach(function (itm, index) {
        if (itm.endsWith('.json')) {
            var data = fs.readFileSync(`${dirPath}/${itm}`);
            let jsonObj = JSON.parse(data.toString());
            Object.keys(jsonObj).map((key) => {
                stringResource = `${stringResource}\t${key}:()=>"${jsonObj[key]}",\n`
            });
        } else {
            throw new Error('you must rename filename endwith .json')
        }
    });
    if (stringResource) {
        stringResource = stringResource.substring(0, stringResource.lastIndexOf(','));
    }
    console.log(`stringResource:\n` + stringResource);
    return stringResource;
}


/**
 * 列出所有的颜色
 * 1个目录对应多个color.json文件
 *  1.需要解决声明重复问题
 *  2.需要不同的命名空间
 * @param dirPath
 */
function listColors(dirPath) {
    let colorResource = '';
    var files = fs.readdirSync(dirPath);
    files.forEach(function (itm, index) {
        if (itm.endsWith('.json')) {
            var data = fs.readFileSync(`${dirPath}/${itm}`);
            let jsonObj = JSON.parse(data.toString());
            Object.keys(jsonObj).map((key) => {
                colorResource = `${colorResource}\t${key}:()=>"${jsonObj[key]}",\n`
            });
        } else {
            throw new Error('you must rename filename endwith .json')
        }
    });
    if (colorResource) {
        colorResource = colorResource.substring(0, colorResource.lastIndexOf(','));
    }
    //console.log(`colorResource:\n` + colorResource);
    return colorResource;
}

/**
 * 列出所有的单位
 * 1个目录对应多个dimen.json文件
 *  1.需要解决声明重复问题
 *  2.需要不同的命名空间
 * @param dirPath
 */
function listDimen(dirPath) {
    let dimenResource = '';
    var files = fs.readdirSync(dirPath);
    files.forEach(function (itm, index) {
        if (itm.endsWith('.json')) {
            var data = fs.readFileSync(`${dirPath}/${itm}`);
            let jsonObj = JSON.parse(data.toString());
            Object.keys(jsonObj).map((key) => {
                dimenResource = `${dimenResource}\t${key}:()=>${jsonObj[key]},\n`
            });
        } else {
            throw new Error('you must rename filename endwith .json')
        }
    });
    if (dimenResource) {
        dimenResource = dimenResource.substring(0, dimenResource.lastIndexOf(','));
    }
    //console.log(`dimenResource:\n` + dimenResource);
    return dimenResource;
}

注意其中的路径,路径填充好了,就执行node init命令就好了(webstorm term)

这样就会在项目根目录生成Resouce文件,如下:
 

/**
* @author youxuan  E-mail:[email protected]
* @Description 资源清单
*/

    

//!!!!!代码自动生成,请勿手动修改!!!!!


export let bg_filelist=()=>require('./react_native/imgs/bg_filelist.png');
export let bg_filelist_selected_multi=()=>require('./react_native/imgs/bg_filelist_selected_multi.png');
export let bg_filelist_selected_single=()=>require('./react_native/imgs/bg_filelist_selected_single.png');
export let bg_filelist_selected_two=()=>require('./react_native/imgs/bg_filelist_selected_two.png');
export let bg_white_round_rect=()=>require('./react_native/imgs/bg_white_round_rect.png');
export let filetype_excel_tilemode=()=>require('./react_native/imgs/filetype_excel_tilemode.png');
export let filetype_file_tilemode=()=>require('./react_native/imgs/filetype_file_tilemode.png');
export let filetype_folder=()=>require('./react_native/imgs/filetype_folder.png');
export let filetype_folder_tilemode=()=>require('./react_native/imgs/filetype_folder_tilemode.png');
export let filetype_other=()=>require('./react_native/imgs/filetype_other.png');
export let filetype_ppt_tilemode=()=>require('./react_native/imgs/filetype_ppt_tilemode.png');
export let filetype_word_tilemode=()=>require('./react_native/imgs/filetype_word_tilemode.png');
export let ic_add=()=>require('./react_native/imgs/ic_add.png');
export let ic_avatar=()=>require('./react_native/imgs/ic_avatar.png');
export let ic_back=()=>require('./react_native/imgs/ic_back.png');
export let ic_close=()=>require('./react_native/imgs/ic_close.png');
export let ic_filelist_back=()=>require('./react_native/imgs/ic_filelist_back.png');
export let ic_filelist_collaboration=()=>require('./react_native/imgs/ic_filelist_collaboration.png');
export let ic_filelist_list_style=()=>require('./react_native/imgs/ic_filelist_list_style.png');
export let ic_filelist_main=()=>require('./react_native/imgs/ic_filelist_main.png');
export let ic_filelist_more=()=>require('./react_native/imgs/ic_filelist_more.png');
export let ic_filelist_pub=()=>require('./react_native/imgs/ic_filelist_pub.png');
export let ic_filelist_search=()=>require('./react_native/imgs/ic_filelist_search.png');
export let ic_filelist_selected=()=>require('./react_native/imgs/ic_filelist_selected.png');
export let ic_filelist_selected_group_action_toclose=()=>require('./react_native/imgs/ic_filelist_selected_group_action_toclose.png');
export let ic_filelist_selected_group_action_tofolder=()=>require('./react_native/imgs/ic_filelist_selected_group_action_tofolder.png');
export let ic_filelist_selected_group_action_tostarred=()=>require('./react_native/imgs/ic_filelist_selected_group_action_tostarred.png');
export let ic_filelist_selected_group_action_totrash=()=>require('./react_native/imgs/ic_filelist_selected_group_action_totrash.png');
export let ic_filelist_selected_group_more=()=>require('./react_native/imgs/ic_filelist_selected_group_more.png');
export let ic_filelist_sorttype=()=>require('./react_native/imgs/ic_filelist_sorttype.png');
export let ic_filelist_star=()=>require('./react_native/imgs/ic_filelist_star.png');
export let ic_filelist_tile_style=()=>require('./react_native/imgs/ic_filelist_tile_style.png');
export let ic_filelist_unselected=()=>require('./react_native/imgs/ic_filelist_unselected.png');
export let ic_filetype_excel=()=>require('./react_native/imgs/ic_filetype_excel.png');
export let ic_filetype_folder=()=>require('./react_native/imgs/ic_filetype_folder.png');
export let ic_filetype_ppt=()=>require('./react_native/imgs/ic_filetype_ppt.png');
export let ic_filetype_word=()=>require('./react_native/imgs/ic_filetype_word.png');
export let ic_menu_collect=()=>require('./react_native/imgs/ic_menu_collect.png');
export let ic_menu_desktop=()=>require('./react_native/imgs/ic_menu_desktop.png');
export let ic_menu_recent_use=()=>require('./react_native/imgs/ic_menu_recent_use.png');
export let ic_menu_recycle_bin=()=>require('./react_native/imgs/ic_menu_recycle_bin.png');
export let ic_menu_setting=()=>require('./react_native/imgs/ic_menu_setting.png');
export let ic_menu_share=()=>require('./react_native/imgs/ic_menu_share.png');
export let ic_tab_setting_normal=()=>require('./react_native/imgs/ic_tab_setting_normal.png');
export let ic_tab_setting_selected=()=>require('./react_native/imgs/ic_tab_setting_selected.png');
export let main=()=>require('./react_native/imgs/main.png');
export let main_list_search=()=>require('./react_native/imgs/main_list_search.png');
export let main_list_sort=()=>require('./react_native/imgs/main_list_sort.png');
export let main_list_tile=()=>require('./react_native/imgs/main_list_tile.png');
export let selected=()=>require('./react_native/imgs/selected.png');
    

//!!!!!代码自动生成,请勿手动修改!!!!!

export const String={
	titleMain:()=>"主页",
	titleSetting:()=>"设置",
	testMain:()=>"test主页",
	testSetting:()=>"test设置"
};
    

//!!!!!代码自动生成,请勿手动修改!!!!!

export const Color={
	titleColor:()=>"#6cf",
	windowBackground:()=>"#fff",
	testColor:()=>"#6cf",
	testBackground:()=>"#fff"
};
    

//!!!!!代码自动生成,请勿手动修改!!!!!

export const Value={
	titleSize:()=>16,
	contentSize:()=>12,
	testTitleSize:()=>17,
	testContentSize:()=>11
};

这个时候我们就可以引用这个类了
 

1. 执行命令 node init
2. import * as Resource from '../../../../Resource';
3.