🎯

create a react native image previewer

ImagePreviewerA react native image previewer !

image-previewer-demo

安装

npm install --save rc-image-previewer

# or

yarn add rc-image-previewer

使用

import ImagePreviewer from 'rc-image-previewer';

const { width } = Dimensions.get('window');

export default class App extends React.Component {
  render() {
    const ImgWidth = width;
    const ImgHeight = ImgWidth * 0.6;
    return (
      <View style={{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
        <ImagePreviewer
          source={MountHuang}
          style={{
            width: ImgWidth,
            height: ImgHeight,
          }}
          resizeMode="stretch"
        />
      </View>
    );
  }
}

API

API name Usage
style The style of element.(Optional)
source The image source, same as source.
resizeMode The image resize mode, default is contain.(Optional)

发布流程

  1. 清理项目, 将主要文件放到根目录下export出去
  2. 将项目托管到GitHub
  3. npm官网注册账号
  4. 在项目目录下登录npm账号: $ npm adduser
  5. 发布项目: $ npm publish
  6. 确保~/.npmrc文件是官方源: registry=https://registry.npmjs.org/
  7. 更新代码时需要先提交到GitHub, 再 $ npm version minor, 最后再 $ npm publish
  8. 1.2.3: major minor patch分别为1, 2, 3, 更新会自动更新相对应的版本
  9. 规范: 大的API改动需要更新major, 小的bug修复需要更新minor, 更新图标文件/readme等需要更新patch
  10. Shields里找几个比如npm版本/MIT协议的徽章
  11. travis持续集成配置
  12. 使用.npmignore排除Example文件夹 (和.gitignore相同)

TODO

  1. 双指放大缩小图片(困住的问题)
  2. 改用Coroutine Event Loops

在我们一生中,命运赐予我们每个人三个导师,三个朋友,三名敌人,三个挚爱。但这十二人总是不以真面目示人,总要等到我们爱上他们、离开他们、或与他们对抗时,才能知道他们是其中哪种角色。