React native 图片资源管理类

 

问题：一直引用不成功，提示路径找不到。

解决方案:

Resource 目录下:

  images:存放的项目资源图片

  private：隐私协议文件

  images.js:图片管理类

  index.js: 文件入口

 

红的标记为对称存在的，不可以少index.js文件。

 

images.js:

 

/**
 * Created by marno on 2017/4/6
 * Function:图片管理类
 */
export default {
  
    //为了区分图片，此处按照不同的功能板块将图片分类
    //Common
    common: {
        ic_avatar: require('./imgs/avatar.jpg'),
        ic_back: require('./imgs/back.png'),
    },

    //主页
    home: {
        ic_light_off: require('./imgs/scanLigtOff.png'),
        ic_light_on: require('./imgs/scanLightOn.png'),
        ic_manual_input: require('./imgs/manualInput.png'),
        ......
    },


    .....
}

 

使用说明:

导出使用
在 index.js 文件中导出组件

import Images from './Images' //PS:import 的时候 直接以类的形式倒出，因为定义为 expore default {}导出会报错

export { Images }
在其他文件中调用:

import Images from "../../resource/images";//你自己的项目实际路径

export default class Home extends Component {
    render(){
        return(
            <View style={styles.container}>
                 <Image source={Images.common.ic_avatar}>
            </View>
        );
    }
}