Einführung in die Bildsteuerung in React-native

1. Einführung

Eine React-Komponente, die zum Anzeigen vieler verschiedener Arten von Bildern verwendet wird, einschließlich Netzwerkbildern, statischen Ressourcen, temporären lokalen Bildern und Bildern auf lokale Festplatte (z. B. Fotoalbum) usw.
Ab Version 0.14 bietet React Native eine einheitliche Möglichkeit, Bilder in iOS- und Android-Anwendungen zu verwalten. Um Ihrer App ein statisches Bild hinzuzufügen, platzieren Sie die Bilddatei einfach irgendwo im Codeordner, z. B. img, und verweisen Sie dann wie folgt darauf:
<Image source={require(&#39;./img/check.png&#39;)} />
Wenn Sie my-icon.ios.png und my-icon.android.png haben, wählt Packager je nach Plattform unterschiedliche Dateien aus.
Sie können auch Dateinamensuffixe wie @2x und @3x verwenden, um Bilder für verschiedene Bildschirmauflösungen bereitzustellen. Beispielsweise die folgende Codestruktur:
------ button.js
------ img
------ |-------- check@2x.png
------ |-------- check@3x.p
Packager verpackt alle Bilder und stellt entsprechend der Bildschirmgenauigkeit entsprechende Ressourcen bereit. Beispielsweise verwendet das iPhone 5s check@2x.png, während das Nexus 5 check@3x.png verwendet. Wenn kein Bild vorhanden ist, das genau der Bildschirmauflösung entspricht, wird automatisch das nächstgelegene Bild ausgewählt.
【Hinweis】Wenn der Packager beim Hinzufügen von Bildern ausgeführt wird, müssen Sie den Packager möglicherweise neu starten, um die neu hinzugefügten Bilder korrekt einzuführen. Damit der neue Bildressourcenmechanismus ordnungsgemäß funktioniert, muss der Bildname in „require“ eine statische Zeichenfolge sein und darf nicht in „require“ gespleißt werden.
//Richtig
<Image source={require(&#39;./my-icon.png&#39;)} />
Falsch
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require(&#39;./&#39; + icon + &#39;.png&#39;)} />

Verwenden Sie die Bildressourcen der Hybrid-App

Wenn Sie eine Hybrid-App schreiben (Teil von Die Benutzeroberfläche verwendet React Native, während der andere Teil den nativen Code der Plattform verwendet. Sie können auch Bildressourcen verwenden, die in die App gepackt wurden (gepackt über die Asset-Kategorie von Xcode oder den Zeichenordner von Android):
<Image source={{uri: &#39;app_icon&#39;}} style={{width: 40, height: 40}} />
Hinweis: Bei dieser Methode gibt es keine Sicherheitsüberprüfungen. Sie müssen selbst sicherstellen, dass das Bild tatsächlich in der Anwendung vorhanden ist, und auch die Größe angeben.

Netzwerkbilder laden

Anders als bei statischen Ressourcen müssen Sie die Größe des Bildes manuell angeben.
//Richtig
<Image source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}} style={{width: 400, height: 400}} />
//Falsch
<Image source={{uri: &#39;https://facebook.github.io/react/img/logo_og.png&#39;}} />

Warum nicht in allen Fällen die Größe angeben?

Wenn Sie im Browser die Größe des Bildes nicht angeben, rendert der Browser zunächst eine Größe von 0x0 Das Element nimmt den Platz ein, lädt dann das Bild herunter und rendert das Bild dann basierend auf der richtigen Größe, nachdem der Download abgeschlossen ist. Das größte Problem dabei ist, dass die Benutzeroberfläche während des Bildladevorgangs auf und ab springt, was das Benutzererlebnis sehr beeinträchtigt.
in React Dieses Verhalten wird in Native absichtlich vermieden. Dies wird von den Entwicklern mehr Arbeit erfordern, um die Größe (oder das Seitenverhältnis) des Remote-Bildes im Voraus zu kennen, aber wir glauben, dass dies zu einer besseren Benutzererfahrung führen kann. Beim Lesen von Bildern aus gepackten Anwendungsressourcendateien (mithilfe der require('image!x')-Syntax) ist es jedoch nicht erforderlich, die Größe anzugeben, da ihre Größe beim Laden sofort bekannt ist.
Das tatsächliche Ausgabeergebnis einer solchen Referenz require('image!logo') kann beispielsweise sein:
{"__packager_asset":true,"isStatic":true,"path":"/Users/react/HelloWorld/iOS/Images.xcassets/react.imageset/logo.png","uri":"logo","width":591,"height":573}

Hintergrundbilder durch Verschachtelung realisieren

Ähnlich wie beim Hintergrundbild (Hintergrundbild) im Web erstellen Sie einfach eine -Komponente und fügen dann die Unterkomponenten hinzu kann eingebettet werden
return (  <Image source={...}>    <Text>Inside</Text>  </Image> );

Unterstützt Bilder im GIF- und WebP-Format auf Android

Abhängigkeiten {
// Wenn Sie Versionen vor Android 4.0 (API-Level 14) unterstützen müssen
kompilieren Sie 'com.facebook.fresco:animated-base -support:0.11.0 '

// Wenn Sie GIF-Animationen unterstützen müssen
kompilieren Sie 'com.facebook.fresco:animated-gif:0.11 .0'

// Wenn Sie das WebP-Format unterstützen müssen, einschließlich WebP-Animationen
kompilieren Sie „com.facebook.fresco:animated-webp:0.11 .0“
kompilieren Sie 'com.facebook.fresco:webpsupport:0.11.0'

// Wenn Sie nur das WebP-Format ohne bewegte Bilder unterstützen müssen
kompiliere 'com.facebook.fresco:webpsupport:0.11.0'
}
Wenn Sie gleichzeitig GIF verwenden. Wenn Sie auch Wenn Sie ProGuard verwenden möchten, müssen Sie die folgenden Regeln zu proguard-rules.pro hinzufügen:
-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {  public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); }

2. Attribute

1.onLayout (Funktion) Wenn sich das Bildlayout ändert, wird diese Methode aufgerufen:
{nativeEvent: {layout: {x, y, width, height}}}.
2.onLoad (Funktion): Wenn das Bild erfolgreich geladen wurde, rufen Sie diese Methode zurück
3.onLoadEnd (Funktion): Diese Methode wird zurückgerufen, wenn das Bild nicht geladen werden kann, unabhängig davon, ob das Bild erfolgreich geladen wurde oder fehlgeschlagen ist
4.onLoadStart (Funktion ): Wenn das Bild geladen wird, wird diese Methode aufgerufen, wenn
5.resizeMode-Skalierung, optionale Parameter ('cover', 'contain', 'stretch') Wenn die Größe des Bildes die überschreitet Größe des Layouts, der Modus wird entsprechend eingestellt. Bild skalieren oder zuschneiden
Abdeckung: Skalieren Sie das Bild unter Beibehaltung des Seitenverhältnisses des Bildes, bis Breite und Höhe größer oder gleich sind die Größe der Containeransicht (wenn der Container eine Polsterung hat, dann entsprechend minus). Übersetzungsanmerkung: Auf diese Weise deckt das Bild den Container vollständig ab oder überragt ihn sogar, sodass kein Leerraum im Container verbleibt.
enthalten: Skalieren Sie das Bild unter Beibehaltung des Seitenverhältnisses des Bildes, bis die Breite und Höhe kleiner oder gleich der Größe der Containeransicht sind (wenn der Container über Auffüllung verfügt, entsprechend subtrahieren). Übersetzungshinweis: Auf diese Weise wird das Bild vollständig in den Container eingeschlossen, und es kann etwas Leerraum im Container vorhanden sein.
Strecken: Strecken Sie das Bild, ohne das Seitenverhältnis bis zur Breite und Höhe beizubehalten Füllen Sie einfach den Behälter.
Wiederholen: Wiederholen Sie die Kacheln, bis der Behälter gefüllt ist. Das Bild behält seine ursprüngliche Größe. Nur für iOS verfügbar.
Mitte: Zentriert ohne Dehnung.
6.source {uri:string} bezieht sich auf das markierte Bild. Dieser Parameter kann eine Netzwerk-URL-Adresse oder ein lokaler Pfad (verwenden Sie „require (relativer Pfad) zur Referenzierung“) sein

3. Stil

1.FlexBox unterstützt den flexiblen Boxstil
2.Transforms unterstützt Attributanimation 3.resizeMode-Einstellung Zoommodus
4.backgroundColor Hintergrundfarbe
5.borderColor Randfarbe 6.borderWidth Randbreite
7.borderRadius Rand abgerundete Ecken
8.overflow Wenn die Bildgröße den Container überschreitet, können Sie es so einstellen, dass es angezeigt oder ausgeblendet wird („sichtbar“, „versteckt“).
9.tintColor-Farbeinstellung 10 .Deckkrafteinstellung Transparenz 0,0 (transparent)-1,0 (völlig undurchsichtig)

4. Beispiel

Beispiel für das Laden von Internetbildern
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,            });        }    } }
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'        }    } );

Effekt

Image_first.jpeg

Weiter klicken

Bild_jpeg

Weiter klicken

Image_third.jpeg

Aufzeichnen meines eigenen RN-Lernpfads, rein für meine eigene Wertschöpfung, wenn etwas nicht stimmt, besprechen Sie gemeinsam den Fortschritt

Das obige ist der detaillierte Inhalt vonEinführung in die Bildsteuerung in React-native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!