ネイティブのテキストとイメージはどのように反応しますか？小規模なデバイスでのテキストとイメージの縮小、大規模なデバイスでのテキストとイメージの拡大

Question

ネイティブテキストとイメージの反応はどのように反応しますか？

フレックスボックスはレイアウトを反応させることができますが、テキストや画像には適用できないようです。

は、iPhoneの4Sに小さいiphone 6で大きな

おかげで私のテキストや画像をe.g.Make。

Answer 1

お客様は、アプリケーションを応答可能にするためにFlexboxを使用します。今、テキストと画像が画面の大きさに比べて表示されます

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, 
    } 
}); 

：

はたとえば、あなたが同じライン上のテキストの行や画像を表示するように望んでいたと言います。通常のハングアップは、flexDirectionがデフォルトでcolumnに設定されていることです。あなたは私たちが肖像画から横向きに反転したときに何が起こるかを見ることができます：あなたが見ることができるように、テキストと画像は姿勢の変化に対応

。

Flexboxの概要については、次のガイドを参照してください。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

だけcolumnのflex-directionにネイティブデフォルトは反応することを念頭に置いておくので、あなたが水平方向にレイアウトされた事をしたい場合は、明示的rowに設定する必要があります。

Answer 2

あなたはFlexboxについて考えることができます。単にTextとImageをView内にラップし、Viewのflexboxを反応させるだけです。

Answer 3

私はreact-native-fit-imageがあなたにとって便利だと思います。

リアクトネイティブフィットイメージを使用すると、反応しやすいイメージコンポーネントを描画できます。

このコンポーネントは、次のように使用できます。

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