本文共 2760 字，大约阅读时间需要 9 分钟。

重写默认的 Image

提取了一些通用的部分做成组件，适应大部分业务场景。

/* @flow */import React, { Component } from 'react';import { Image, Style } from 'react-native';import Icons from '../../../Assets/images'import isString from 'lodash/isString'/** * [props source 支持传字符串（CDN url）和本地图片(对象)] * [props size   图片尺寸（宽高都相对，可以传这一个值，否则使用样式设置宽高）] * [props defaultSource 默认图] * [props ohterProps 支持图片的其它属性] * @type {[type]} */export default class DJImage extends Component {  static defaultProps = {    size: 56  }  render() {    let props = this.props;    let { source, size, style } = props;    if (isString(source)) {      source = {uri: source}    }    return (          );  }}

高频图标定制 IconArrow

import React, { Component } from 'react';import { Animated, StyleSheet } from 'react-native';import PropTypes from 'prop-types';import Icons from '../../Assets/images';/** * [IconArrow(>) 箭头图标使用方法] * @type {UIComponent} * direction 箭头方向枚举值（'top', 'right', 'bottom', 'left'）, 默认为 right * size 图标大小数字型 默认 15 * color 图标颜色字符串型 默认 白色 * style 支持自定义样式 * * 导入方式： * import { IconArrow } from '../../../components/UIComponents'; * * 组件渲染： * 
    *  * 由于某些场景需要需要动画过渡显示箭头，因此直接使用了 Animated.Image */export default class IconArrow extends Component {  static propTypes = {    direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),    size: PropTypes.number,    color: PropTypes.string  };  static defaultProps = {    size: 15  };  getDegVal(direction) {    let degVal = 0;    switch (direction) {      case 'bottom':        degVal = 90;        break;      case 'top':        degVal = -90;        break;      case 'left':        degVal = 180;        break;      default:        0;    }    return degVal;  }  render() {    let { direction, size, style, color } = this.props;    let deg = this.getDegVal(direction);    return (      
       );  }}

其它使用频率较高的图片也可以使用类似的方式定制一下，可以减少很多重复代码，用起来简单。

高清图加载

原生开发通常会使用适配视网膜高清屏幕的高清图，在 React Native 加载非常简单。

// source images@2x.png and images@3x.png// 自动适配，加载 2x or 3x 图片import images from 'images.png'

sprite 拼图的应用

大量的图片都放在本地会影响包的体积大小，可以将小图片合并到一张图放到CDN上。通常的web开发加载拼图的方式很简单，但是在 React Native 中该怎样做呢？下面是具体的 sprite 拼图加载方案：

使用一个 View 包装图片，View 的大小为切图大小，超出部分 hide，Image 是合并后的原图大小，用绝对或者相对定位控制显示位置，传递不同的 left 和 top 即可模拟backgroundPosition。

starWrap: {  height: 10,  width: 10,  overflow: 'hidden',  alignSelf: 'center',  backgroundColor: 'transparent'},star: {  height: 10,  width: 50},

使用拼图时，Android 平台会有溢出问题，需要给外层容器增加：backgroundColor: 'transparent' 样式

图片高斯模糊

Image 组件，高斯模糊效果使用 blurRadius 属性，如：

背景图

早期版本 Image 组件可以作为容器组件，内部可以嵌套子元素，但是新版本不允许这样做了，Image 变成了自闭合组件。那么需要实现一个背景容器组件，首先使用 View 做容器，图片使用绝对定位占满整个容器，代码如下：

const {children, style, imageStyle, ...props} = this.props;  return (    
         
          {children}    
     );

React Native 0.46 版本以后可以直接使用 ImageBackground 组件。

转载地址：http://tsgni.baihongyu.com/