react-native-responsive-image, 响应本机的响应图像组件

分享于 

4分钟阅读

GitHub

  繁體 雙語
Responsive image component for React Native
  • 源代码名称:react-native-responsive-image
  • 源代码网址:http://www.github.com/Dharmoslap/react-native-responsive-image
  • react-native-responsive-image源代码文档
  • react-native-responsive-image源代码下载
  • Git URL:
    git://www.github.com/Dharmoslap/react-native-responsive-image.git
    Git Clone代码到本地:
    git clone http://www.github.com/Dharmoslap/react-native-responsive-image
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/Dharmoslap/react-native-responsive-image
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    响应本机响应映像

    DavidnpmGitHub commitsnpm

    为什么?

    不管设备屏幕大小和屏幕分辨率如何,本机大小的React图像呈现相同。 这个组件在所有的iOS和Android设备上扩展自己的seemlesly。

    安装

    npm install react-native-responsive-image --save

    用法

    <ResponsiveImage> 需要 initWidthinitHeight 道具。

    这些值用于在任何具有屏幕大小的设备上设置图像大小,或者更大。

    然后将图像缩小到任何较小的设备。

    对于额外的配置,你可以传递与原始的 <Image> 组件相同的。

    示例

    importReact, { Component } from'react';import { AppRegistry, StyleSheet, View } from'react-native';importResponsiveImagefrom'react-native-responsive-image';classAppextendsComponent {
     render() {
     return (
     <View style={{ flexGrow:1, justifyContent:'center', alignItems:'center', flexDirection:'row' }}><ResponsiveImage source={{uri:'https://reactjs.org/logo-og.png'}} initWidth="138" initHeight="138"/><ResponsiveImage source={{uri:'https://reactjs.org/logo-og.png'}} initWidth="138" initHeight="138"/><ResponsiveImage source={{uri:'https://reactjs.org/logo-og.png'}} initWidth="138" initHeight="138"/></View> );
     }
    }AppRegistry.registerComponent('ResponsiveImageExample', () => App);

    对于 initWidth=138,它看起来如下所示:

    设备屏幕宽度比例 <Image> 宽度
    iPhone传感器3200.77106
    iPhone X3750.902117
    iPhone8加4141138
    诺基亚 5360x360dpi,32位 cmyk0.87120
    iPad ( 或者任何平板电脑)-1138

    只有一个图像?

    听起来,你可以通过向低分辨率提供低分辨率图像来保存一些加载。 最好的方法是只提供一个高分辨率( Retina ) 压缩图像。 它们可以被压缩得很好,结果看起来是一样的。

    Retina Compression

    示例项目

    创建项目

    create-react-native-app ResponsiveImageExample

    cp./example/App.js./ResponsiveImageExample/App.js

    cp -R./src./ResponsiveImageExample/src

    cd ResponsiveImageExample

    yarn start

    插件开发

    修改。/src目录中的任何文件

    传播更改方式 cp -R./src./ResponsiveImageExample/src


    COM  图像  react  component  NAT  Native  
    相关文章