https://github.com/eden90267/react-native-full-ratio-image
擴充 Image 組件，提供自適應全屏寬度並按等比例縮放、屏幕縱橫比例維持以及寬度外距屬性設置
https://github.com/eden90267/react-native-full-ratio-image
react react-native
Last synced: 2 months ago
JSON representation
擴充 Image 組件，提供自適應全屏寬度並按等比例縮放、屏幕縱橫比例維持以及寬度外距屬性設置
- Host: GitHub
- URL: https://github.com/eden90267/react-native-full-ratio-image
- Owner: eden90267
- License: mit
- Created: 2018-08-21T17:44:31.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-05T18:33:31.000Z (almost 8 years ago)
- Last Synced: 2025-09-21T19:26:46.091Z (10 months ago)
- Topics: react, react-native
- Language: JavaScript
- Size: 28.3 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/react-native-full-ratio-image)
[](https://nodei.co/npm/react-native-full-ratio-image/)
# react-native-full-ratio-image
擴充 Image 組件，提供以下功能
- 自適應全屏寬度並按等比例縮放
- 屏幕縱橫比例維持
- 寬度外距屬性設置
- pt 設置
- 百分比設置
放置 Logo 用 Image 非常適合。以下範例圖片透過 `width: '70%'` 方式，並隨縱橫比例維持其設置的寬度：
## What happened ?
在沒有該擴充 Image 的使用下，一般要能自適應圖片通常會使用寬高百分比，但寬高百分比將會帶來以下問題：
- 不同手機載具的螢幕解析將會有不同圖片比例效果
- Android 的 keyboard 將會在彈出鍵盤避免擋住當前的視圖，自動調整視圖的位置，導致百分比設置圖片的寬高將會是不符常規的比例呈現 (寬高被壓縮)
- 圖片寬高百分比並不會針對手機縱橫使用自動調整比例，需要 reload
## Installation
```shell
$ npm install react-native-full-ratio-image
```
## Usage
```javascript
import FullRatioImage from 'react-native-full-ratio-image';
```
必須提供原始圖片寬高 props 以利該擴充 Image 組件可自動計算等比例圖片縮放。
- originWidth:number
- originHeight:number
options props：
- marginX:number|string
寬度外距 (marginLeft + merginRight = marginX)。可設置 pt 數字或百分比，比如以下範例設置外距為 '30%'，讓該圖片以父元件寬度保持 `width: '70%'`。
```javascript
const LOGO_WIDTH = 3840;
const LOGO_HEIGHT = 906;
class SignInScreen extends Component {
// ...
render() {
return (
{/* ... */}
);
}
}
```
## License
[MIT License](http://opensource.org/licenses/mit-license.html). © eden90267