React Native--Image控制元件
基本用法
載入本地圖片
<Image source={require('./img/baidu.png')}/>
載入App內資源圖片
<Image source={{uri: 'ic_launcher'}} style={{width: 140, height: 140}} />
載入網路圖片
<Image source={{uri:'http://172.17.137.68/heqiang/2.jpg'}} style={{width: 200, height: 200}}/>
資源圖片和網路圖片必須宣告圖片寬高,否則不顯示。
適配不同平臺
有時我們希望在不同平臺之間用不同的圖片
比如baidu.android.png,baidu.ios.png,程式碼中只需要寫baidu.png,便可以適配android和ios平臺
[email protected],[email protected]還可以適配不同解析度的機型。如果沒有圖片恰好滿足螢幕解析度,則會自動選中最接近的一個圖片。這點是和Android中是類似的。
程式碼
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
class HelloWorldAppp extends Component{
render() {
console.log("render()");
return (
<View >
<Text style={styles.title_text}>本地圖片</Text>
<Image source={require('./img/baidu.png')}/>
<Text style={styles.title_text}>資源圖片</Text>
<Image source={{uri: 'ic_launcher'}} style={{width: 140, height: 140}} />
<Text style={styles.title_text} >網路圖片</Text>
<Image source={{uri:'http://*******.jpg'}} style={{width: 200, height: 200}}/>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => HelloWorldAppp);
const styles = StyleSheet.create({
title_text:{
fontSize:18,
}
});
效果圖
回撥函式和屬性
- onLayout:layout時呼叫,與View元件的onLayout函式類似
- onLoadStart:開始載入時呼叫
- onLoadEnd載入結束時呼叫
- onLoad:成功讀取圖片時呼叫
<Image source={{uri:'http://172.17.137.68/heqiang/23.jpg'}} style={{width: 200, height: 200}}
onLoad={function(){console.log("onLoad");}}
onLayout={function(){console.log("onLayout");}}
onLoadStart={function(){console.log("onLoadStart");}}
onLoadEnd={function(){console.log("onLoadEnd");}}
/>
resizeMode
- cover:在顯示比例不失真的情況下填充整個顯示區域。可以對圖片進行放大或者縮小,超出顯示區域的部分不顯示,也就是說,圖片可能部分會顯示不了。
- contain:要求顯示整張圖片,可以對它進行等比縮小,圖片會顯示完整,可能會露出Image控制元件的底色。如果圖片寬高都小於控制元件寬高,則不會對圖片進行放大。
- stretch:不考慮保持圖片原來的寬高比,填充整個Image定義的顯示區域,這種模式顯示的圖片可能會畸形和失真。
- center:居中不縮放
resizeMode也可以定義在style中,但在屬性上定義的優先順序比style中高。比如下面設定中最終生效的是Image.resizeMode.center。
<Image source={{uri:'http://172.17.137.68/heqiang/test.png'}}
style={{width: 200, height: 200, backgroundColor: 'grey',resizeMode: Image.resizeMode.contain}}
resizeMode={Image.resizeMode.center}
/>
樣式風格
- FlexBox 支援彈性盒子風格
- Transforms 支援屬性動畫
- resizeMode 設定縮放模式
- backgroundColor 背景顏色
- borderColor 邊框顏色
- borderWidth 邊框寬度
- borderRadius 邊框圓角
- overflow 設定圖片尺寸超過容器可以設定顯示或者隱藏(‘visible’,’hidden’)
- tintColor 顏色設定
- opacity 設定不透明度0.0(透明)-1.0(完全不透明)
相關推薦
React Native--Image控制元件
基本用法 載入本地圖片 <Image source={require('./img/baidu.png')}/> 載入App內資源圖片 <Image sou
react native 倒計時控制元件
1.npm install //in package.json "dependencies": { "react_native_countdowntimer":"1.0.2" } //in your js code import CountDownTimer fr
react native 子控制元件傳遞資料給父控制元件
/** * Created by fanxiaole on 17/3/24. * 需求 在子控制元件(select)中選擇性別 在父控制元件(form)中獲取這個值並提交 * */ //步驟 //1.建立父控制元件(form) 並新增子控制元件 同時利用
React-Native-image-picker-調取攝像頭第三方元件:
近期做的軟體中圖片處理是重點,那麼自然也就用到了相機照相或者相簿選取照片的功能。 react-native中有image-picker這個第三方元件,但是0.18.10這個版本還不是太支援iPad。 這個元件同時支援photo和video,也就是照片和視訊都可以用這個
React Native Image多種加載圖片方式
ner styles ole 刷新 理論 width reg apple content p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica } p.p2 { margin: 0.0px 0.0px
RN 使用第三方組件之react-native-image-picker
app ons sep too code project width odata ext 首先給個github地址:https://github.com/react-community/react-native-image-picker 該插件可以同時給iOS和Andro
React-Native開發四 React Native 的Touchable元件
1 Touchable元件簡介 Touchable元件是RN的按鈕元件,一共有四大類 TouchableWithoutFeedback:不帶任何反饋的可觸控元件 TouchableHighlight:在TouchableWithoutFeedback的基礎上添加了當按下時背景會變
WPF的Image控制元件的資源切換
首先需要做一個資源類,把圖片資源放到這個類裡。 然後需要一個轉換Converter類。 public object Convert(object value, Type targetType, object parameter, System.Globalization.Cultu
Asp.net Image控制元件顯示Bitmap生成影象
from:https://blog.csdn.net/qq_29011299/article/details/81137980 using(Bitmap bmp=new Bitmap(300,50)) { &nbs
WPF的Image控制元件圖片不能顯示的問題解決
在wpf窗體中,用<Image>顯示圖片,在設計器中可以顯示,但是在執行的時候卻無法顯示。 查了很多解決方法, 比如設定Copy to Output Directory為Always, 清理後重新編譯等, 均無效果. 後找到一個解決方案(原連結見文末), 指出應修改圖片檔案的Build Act
React Native圖片快取元件
今天介紹一個React Native的圖片快取元件 react-native-rn-cacheimage ,純JS實現,所以相容性很好。 大家都知道,其實React Native 的 Image 元件在 iOS 端實現了快取,而android 端仍未實現,而且,就算實現了 iOS端 ,可能有些需求仍然比較難
React Native 筆記之元件
React Native的元件 什麼是React Native 元件? React Native 都有哪些元件? 建立元件的三種方式 [元件的生命週期](https://react.docschina.org/docs/react-compone
WPFのImage控制元件souce引入的方法總結
原文: WPFのImage控制元件souce引入的方法總結 1、後臺程式碼相對路徑新增(若為絕對路徑,換UriKind的屬性即可) BitmapImage testBitmapImage = new BitmapImage(new Uri(@"\bin\Sources\ON_bt
react native的Navigator元件示例
import React, {Component} from 'react';import {ScrollView, StyleSheet, Text, View, PixelRatio} from 'react-native';import { Navigator } from 'react-native-
react-native react-navigation的用法 react native 導航路由元件react-navigation的使用
一、問題背景 react-navigation是react-native官方推薦的,基於Javascript的可擴充套件且使用簡單的導航,功能強大且完備 回顧一下,react-navigation包含以下功能來幫助我們建立導航器: StackN
12月11日,發生大面積的包含 react-native-image-picker 的安卓專案啟動崩潰現象解決方案。(我的已經解決)
12月11日,發生大面積的包含 react-native-image-picker 的安卓專案啟動崩潰現象。疑似原因為maven源丟失。解決方案見github:https://github.com/react-native-community/react-native-image-picke
React Native關於ScrollableTabView元件
最近工作中使用ScrollableTabView元件的問題,實現如下圖所示的效果: render方法中判斷state中狀態,進行佈局控制 render(){ if(this.state.error){ return(
react-native多圖上傳 react-native-image-picker圖片上傳之多個上傳圖片
話不多說 直接貼程式碼, 如有疑問 下方留言或者發郵箱 引入需要的元件 import ImagePicker2 from 'react-native-image-picker'; import RNHeicConverter from 'react-native
WPF 從程式集中檢索圖片資源stream給Image控制元件使用
原文: WPF 從程式集中檢索圖片資源stream給Image控制元件使用 // 獲取當前程式集 Assembly assembly = Assembly.GetAssembly(GetType()); //
WPF 在image控制元件用滑鼠拖拽出矩形
原文: WPF 在image控制元件用滑鼠拖拽出矩形 今天有小夥伴問我一個問題,在image控制元件用滑鼠拖拽出矩形,本文告訴大家如何使用滑鼠畫出矩形 做出來的效果先請大家看一下 最簡單的方法是在 Down 的時候記錄按下的點,在 移動的時候重新計算所在的寬