React-native의 이미지 제어 소개

1. 소개

네트워크 이미지, 정적 리소스, 임시 로컬 이미지, 로컬 디스크(예: 사진 앨범) 등을 포함하여 다양한 유형의 이미지를 표시하는 데 사용되는 React 구성 요소입니다.
버전 0.14부터 React Native는 iOS 및 Android 앱에서 이미지를 관리하는 통합 방법을 제공합니다. 앱에 정적 이미지를 추가하려면 이미지 파일을 img와 같은 코드 폴더에 넣은 다음 다음과 같이 참조하세요.
<Image source={require('./ img/check .png')} /><Image source={require(&#39;./img/check.png&#39;)} />
如果你有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(&#39;./my-icon.png&#39;)} />
错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require(&#39;./&#39; + icon + &#39;.png&#39;)} />

使用混合App的图片资源

如果你在编写一个混合App（一部分UI使用React Native，而另一部分使用平台原生代码），也可以使用已经打包到App中的图片资源（通过Xcode的asset类目或者Android的drawable文件夹打包）：
<Image source={{uri: &#39;app_icon&#39;}} style={{width: 40, height: 40}} />
注意：这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在，而且还需要指定尺寸。

加载网络图片

与静态资源不同的是，你需要手动指定图片的尺寸。
//正确
<Image source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}} style={{width: 400, height: 400}} />
//错误
<Image source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}} />

my-icon.ios.png 및 my-icon.android.png가 있는 경우 Packager는 플랫폼에 따라 다른 파일을 선택합니다. 🎜🎜🎜@2x 및 @3x와 같은 파일 이름 접미사를 사용하여 다양한 화면 해상도에 대한 이미지를 제공할 수도 있습니다. 예를 들어 다음 코드 구조는 다음과 같습니다. 🎜🎜🎜------ 버튼.js🎜🎜🎜------ img🎜🎜🎜 ------ |--------- check@ 2x .png🎜🎜🎜------ |--------- check@3x.p🎜🎜🎜Packager는 모든 이미지를 패키징하고 화면 정확도에 따라 해당 리소스를 제공합니다. 예를 들어 iPhone 5s는 check@2x.png를 사용하고 Nexus 5는 check@3x.png를 사용합니다. 화면 해상도에 정확히 맞는 이미지가 없을 경우 가장 가까운 이미지가 자동으로 선택됩니다. 🎜🎜🎜【참고】이미지 추가 시 패키저가 실행 중인 경우 새로 추가된 이미지를 올바르게 도입하려면 패키저를 다시 시작해야 할 수도 있습니다. 새로운 이미지 리소스 메커니즘이 제대로 작동하려면 require의 이미지 이름이 정적 문자열이어야 하며 require에 이어붙일 수 없습니다. 🎜🎜🎜//Correct🎜🎜🎜<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); }

🎜구현됨 중첩을 통해 배경 이미지🎜🎜🎜🎜는 웹의 배경 이미지와 유사합니다. 간단히 구성 요소를 만든 다음 배경 이미지가 필요한 하위 구성 요소를 여기에 삽입합니다. <이미지 출처={...}> <텍스트>내부 ; 'com.facebook.fresco:animated-base-support:0.11.0'🎜🎜🎜🎜 // GIF 애니메이션을 지원해야 하는 경우🎜🎜🎜 '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); }🎜🎜

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:&#39;center&#39;}]}>                <View style={styles.image}>                    <Image style={styles.img} resizeMode=&#39;contain&#39; 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

Image_first.jpeg

다음을 클릭하세요

Image_second.jpeg

다음을 클릭하세요. 장

Image_third.jpeg

순전히 나만의 가치 창출을 위해 나만의 RN 학습 경로를 기록합니다. 잘못된 점이 있으면 진행 상황을 함께 논의합시다

위 내용은 React-native의 이미지 제어 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!