React-native의 이미지 제어 소개
- 零下一度원래의
- 2017-06-29 11:24:591912검색
1. 소개
네트워크 이미지, 정적 리소스, 임시 로컬 이미지, 로컬 디스크(예: 사진 앨범) 등을 포함하여 다양한 유형의 이미지를 표시하는 데 사용되는 React 구성 요소입니다.
버전 0.14부터 React Native는 iOS 및 Android 앱에서 이미지를 관리하는 통합 방법을 제공합니다. 앱에 정적 이미지를 추가하려면 이미지 파일을 img와 같은 코드 폴더에 넣은 다음 다음과 같이 참조하세요. <Image source={require('./ img/check .png')} /><Image source={require('./img/check.png')} />
如果你有my-icon.ios.png和my-icon.android.png，Packager就会根据平台而选择不同的文件。
你还可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片。比如下面这样的代码结构：
------ button.js
------ img
------ |-------- check@2x.png
------ |-------- check@3x.p
Packager会打包所有的图片并且依据屏幕精度提供对应的资源。譬如说，iPhone 5s会使用check@2x.png，而Nexus 5上则会使用check@3x.png。如果没有图片恰好满足屏幕分辨率，则会自动选中最接近的一个图片。
【注意】如果你添加图片的时候packager正在运行，可能需要重启packager以便能正确引入新添加的图片。为了使新的图片资源机制正常工作，require中的图片名字必须是一个静态字符串,不能在require中进行拼接。
//正确<Image source={require('./my-icon.png')} />
错误var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';<Image source={require('./' + icon + '.png')} />
使用混合App的图片资源
如果你在编写一个混合App（一部分UI使用React Native，而另一部分使用平台原生代码），也可以使用已经打包到App中的图片资源（通过Xcode的asset类目或者Android的drawable文件夹打包）：<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
注意：这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在，而且还需要指定尺寸。
加载网络图片
与静态资源不同的是，你需要手动指定图片的尺寸。
//正确<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
style={{width: 400, height: 400}} />
//错误<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
<Image source={require('./my-icon.png')} />🎜🎜🎜Error🎜🎜🎜var 아이콘 = this.props.active ? 'my-icon-active' : 'my-icon-inactive';🎜🎜🎜<이미지 소스={require('./' + icon + '. png')} />🎜🎜🎜🎜하이브리드 앱의 이미지 리소스를 사용하세요🎜🎜🎜🎜하이브리드 앱을 작성하는 경우(UI의 일부는 React Native를 사용하고 다른 부분은 플랫폼 네이티브를 사용) 코드), 앱에 패키징된 이미지 리소스를 사용할 수도 있습니다(Xcode의 자산 카테고리 또는 Android의 drawable 폴더를 통해 패키징됨): 🎜🎜🎜<Image source={{uri: 'app_icon' }} style={{width : 40, height: 40}} />🎜🎜🎜참고: 이 방법에는 보안 검사가 없습니다. 이미지가 실제로 애플리케이션에 존재하는지 직접 확인하고 크기를 지정해야 합니다. 🎜🎜🎜🎜네트워크 이미지 로드 중🎜🎜🎜🎜정적 리소스와 달리 이미지 크기를 수동으로 지정해야 합니다. 🎜🎜🎜//Correct🎜🎜🎜<이미지 출처={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
style={{너비: 400, 높이: 400}} />🎜🎜🎜//Error🎜🎜🎜<이미지 출처={{uri: 'https://facebook.github. io/react/img/logo_og.png'}} />🎜🎜모든 경우에 크기를 지정하지 않는 이유
브라우저에서 이미지 크기를 지정하지 않으면 브라우저는 먼저 0x0 크기 요소 자리 표시자를 렌더링한 다음 이미지를 다운로드합니다. 완료된 다음 올바른 크기에 따라 이미지를 렌더링합니다. 가장 큰 문제는 이미지 로딩 과정에서 UI가 위아래로 튀어 오르며 사용자 경험을 매우 나쁘게 만든다는 것입니다.
리액트에서
이 동작은 Native에서 의도적으로 방지됩니다. 이를 위해서는 개발자가 원격 이미지의 크기(또는 종횡비)를 미리 파악하기 위해 더 많은 작업을 수행해야 하지만 이것이 더 나은 사용자 경험으로 이어질 수 있다고 믿습니다. 그러나 패키지된 애플리케이션 리소스 파일에서 이미지를 읽을 때(require('image!x') 구문 사용) 크기는 로드 시 즉시 알 수 있으므로 크기를 지정할 필요가 없습니다.
예를 들어 이러한 참조 require('image!logo')의 실제 출력 결과는 다음과 같습니다. {"__packager_asset":true,"isStatic":true,"path":"/ Users/react /HelloWorld/iOS/Images.xcassets/react.imageset/logo.png","uri":"logo","width":591,"height":573}{"__packager_asset":true,"isStatic":true,"path":"/Users/react/HelloWorld/iOS/Images.xcassets/react.imageset/logo.png","uri":"logo","width":591,"height":573}
通过嵌套实现背景图片
类似web中的背景图（background-image），只需简单地创建一个return (
<Image source={...}>
<Text>Inside</Text>
</Image>
);
在Android 上支持GIF和WebP格式的图片
dependencies {
// 如果你需要支持Android4.0(API level 14)之前的版本
compile 'com.facebook.fresco:animated-base-support:0.11.0'
// 如果你需要支持GIF动图
compile 'com.facebook.fresco:animated-gif:0.11.0'
// 如果你需要支持WebP格式，包括WebP动图
compile 'com.facebook.fresco:animated-webp:0.11.0'
compile 'com.facebook.fresco:webpsupport:0.11.0'
// 如果只需要支持WebP格式而不需要动图
compile 'com.facebook.fresco:webpsupport:0.11.0'
}
如果你在使用GIF的同时还使用了ProGuard，那么需要在proguard-rules.pro中添加如下规则 :-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
}
-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com. facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
}🎜🎜2. 속성
1.onLayout(함수) 이미지 레이아웃이 변경되면 이 메서드가 호출됩니다. 호출 코드는 다음과 같습니다.
{nativeEvent: {layout: {x, y, width, height } }}.
2.onLoad(함수): 이미지가 성공적으로 로드되면 이 메서드가 호출됩니다.
3.onLoadEnd(함수): 이미지 로드에 실패하면 이 메서드가 다시 호출됩니다. 이미지 로드 성공 여부
4.onLoadStart (fcuntion): 이미지 로드가 시작될 때 이 메서드가 호출됩니다.
5.resizeMode 크기 조정, 선택적 매개 변수('cover', 'contain', 'stretch) ') 이미지 크기가 레이아웃을 초과하는 경우 크기 조정 시 설정된 설정에 따라 이미지 크기가 조정되거나 잘립니다. 모드
표지: 너비와 높이가 레이아웃보다 커질 때까지 이미지의 가로 세로 비율을 유지하면서 이미지 크기를 조정합니다. 또는 컨테이너 뷰의 크기와 같습니다(컨테이너에 패딩이 있는 경우 그에 따라 뺍니다). 주석: 이러한 방식으로 이미지는 컨테이너를 완전히 덮거나 심지어 초과하여 컨테이너에 빈 공간을 남기지 않습니다.
contain: 너비와 높이가 컨테이너 뷰의 크기보다 작거나 같을 때까지 이미지의 가로 세로 비율을 유지하면서 이미지 크기를 조정합니다(컨테이너에 패딩이 있는 경우 그에 따라 뺍니다). 주석: 이런 식으로 이미지가 컨테이너에 완전히 싸여 컨테이너에 약간의 빈 공간이 있을 수 있습니다.
늘이기: 너비와 높이가 컨테이너를 채울 때까지 가로 세로 비율을 유지하지 않고 이미지를 늘립니다.
반복: 용기가 채워질 때까지 타일을 반복합니다. 이미지는 원래 크기를 유지합니다. iOS에서만 사용할 수 있습니다.
center: 늘어나지 않고 중앙에 위치합니다.
6.source {uri:string}은 표시된 이미지를 나타냅니다. 이 매개변수는 네트워크 URL 주소 또는 로컬(참조하려면 필수(상대 경로) 사용) 경로일 수 있습니다.
3. 스타일 스타일
1.FlexBox는 유연한 상자 스타일을 지원합니다.
2.Transforms는 속성 애니메이션을 지원합니다. 3.resizeMode는 크기 조정 모드를 설정합니다.
4.BackgroundColor 배경색
5.borderColor 테두리 색상 6.borderWidth 테두리 너비
7 . borderRadius 테두리 둥근 모서리
8.overflow 이미지 크기를 컨테이너를 초과하도록 설정하고 표시 또는 숨기기('표시', '숨김') 설정
9.tintColor 색상 설정 10.opacity 불투명도 0.0 설정(투명) )-1.0(완전 불투명)
4. 示例
加载网路图文字例子class MyImageDemo는 Component {를 확장합니다.
렌더링() {
반품 (
<보기 스타일={[styles.flex,{marginTop:45}]}>
<내 이미지 imgs={imgs}> </내 이미지>
</보기>
);
}
}class MyImageDemo extends Component {
render() {
return (
<View style={[styles.flex,{marginTop:45}]}>
<MyImage imgs={imgs}> </MyImage>
</View>
);
}
}class MyImage extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,//图片索引
imgs: this.props.imgs,
};
}render() {
return (
<View style={[styles.flex,{alignItems:'center'}]}>
<View style={styles.image}>
<Image style={styles.img}
resizeMode='contain'
source={{uri:this.state.imgs[this.state.count]}}/>
</View>
<View style={styles.btns}>
<TouchableOpacity onPress={this.onPrevious.bind(this)}><View
style={styles.btn}><Text>上一张</Text></View></TouchableOpacity><TouchableOpacity onPress={this.onNext.bind(this)}><View style={styles.btn}><Text>下一张</Text></View></TouchableOpacity>
</View>
</View>
);
}onPrevious() {
var count = this.state.count;
count--;
if (count >= 0) {
this.setState({
count: count,
});
}
}
onNext() {
var count = this.state.count;
count++;
if (count < this.state.imgs.length) {
this.setState({
count: count,
});
}
}
}class MyImage는 Component를 확장합니다.
생성자(소품) {
슈퍼(소품);
this.state = {
개수: 0,//그림 조각
imgs: this.props.imgs,
};
}🎜🎜🎜render() {
반품 (
<보기 스타일={[styles.flex,{alignItems:'center'}]}>
<스타일 보기={styles.image}>
<이미지 스타일={styles.img}
resizeMode='포함'
소스={{uri:this.state.imgs[this.state.count]}}/>
</보기>
<보기 스타일={styles.btns}>
<TouchableOpacity onPress={this.onPrevious.bind(this)}><보기
style={styles.btn}><Text>上一张</Text></View></TouchableOpacity>🎜🎜🎜<TouchableOpacity onPress={this.onNext .bind(this)}><보기 스타일={styles.btn}><Text>下一张</Text></View></TouchableOpacity>
</보기>
</보기>
);
}🎜🎜🎜onPrevious() {
var 개수 = this.state.count;
세다--;
if (개수 >= 0) {
this.setState({
카운트: 카운트,
});
}
}
onNext() {
var 개수 = this.state.count;
카운트++;
if (count < this.state.imgs.length) {
this.setState({
카운트: 카운트,
});
}
}
}🎜🎜const styles = StyleSheet.create({
flex: {
flex: 1,
},
image: {
width: 300,
height: 200,
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
borderColor: '#ccc',
borderRadius: 5,
},
img: {
width: 200,
height: 150,
},
btn: {
width: 60,
height: 35,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 3,
justifyContent: 'center',
alignItems: 'center',
marginRight: 30,
},
btns: {
flexDirection: 'row',
marginTop: 20,
justifyContent: 'center'
}
}
);
Effect
다음을 클릭하세요
다음을 클릭하세요. 장
순전히 나만의 가치 창출을 위해 나만의 RN 학습 경로를 기록합니다. 잘못된 점이 있으면 진행 상황을 함께 논의합시다
위 내용은 React-native의 이미지 제어 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!