Wie reagiert nativer Text und Bild reagieren? kleinerer Text und Bild in kleinem Gerät, größerer Text und Bild in großem Gerät

Question

Wie reagieren nativer Text und Image responsive?

Ich weiß nur die Flexbox kann Layout reagieren, aber scheint nicht in Text und Bild zutreffen.

e.g.Make meinen Text und Bild kleiner in iphone 4s, größer in iphone 6

Dank.

Answer 1

Sie können Flexbox verwenden, um Ihre Anwendung reaktionsfähig zu machen.

Zum Beispiel, sagen Sie eine Textzeile und ein Bild auf der gleichen Zeile angezeigt werden wollte:

class ResponsiveExample extends Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <Text style={styles.text}> 
        Example of centered text 
       </Text> 
       <Image 
        resizeMode={"contain"} 
        style={styles.image} 
        source={{uri: "your image"}}/> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     flexDirection: "row", 
     alignItems: "center", 
     justifyContent: "space-between" 
    }, 
    text: { 
     marginLeft: 20, 
     flex: 1 
    }, 
    image: { 
     marginRight: 20, 
     height: 400, 
     flex: 3, 
    } 
}); 

nun den Text und Bild an die Bildschirmgröße relativ angezeigt. Das übliche Aufhängen hier ist, dass flexDirection standardmäßig column, die Dinge vertikal ausrichten wird. Sie können sehen, was passiert, wenn wir von Hochformat auf Querformat drehen:

Wie Sie sehen können, der Text und Bild auf die Änderung der Orientierung reagieren.

Für eine bessere Übersicht über die Flexbox beziehe ich mich gerne auf die folgende Anleitung: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Denken Sie daran, dass ein flex-direction von column, auf einheitlichem Vorgaben reagieren so, wenn Sie horizontal Dinge gelegt möchten, müssen Sie dies explizit auf row müssen.

Answer 2

Sie haben recht, wenn Sie an Flexbox denken, einfach Ihren Text und Ihr Bild innerhalb der Ansicht einbinden und diese Ansicht flexbox reaktionsfähig machen.

Answer 3

Ich denke, react-native-fit-image ist nützlich für Sie.

React Native Fit Image ermöglicht das Zeichnen reaktionsfähiger Bildkomponenten.

Sie können diese Komponente wie folgt verwenden.

<FitImage source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }} style={styles.fitImage} />