アスペクト比を維持して、その幅に基づいて視点の高さを動的に設定する方法はありますか？

Question

私は、アスペクト比を維持しながら、その幅がコンテナの幅に反応するビューを望みます。 幅や高さをハードコードするのではなく、動的で応答性が高いので、複数の状況で再利用可能なコンポーネントとして再利用できるようにします。

私はそれが次のコードに似た働きを願って：

<View style={{ 
    alignSelf: 'stretch', 
    aspectRatio: 1.5 
}} /> 

それはそのコンテナの幅を記入し、動的にその幅に基づいた独自の高さを設定する必要があります。

これはフレックスボックスとネイティブで反応しますか？

Answer 1

Hendy Irawanがコメントしたよう、ネイティブがStyleSheetにaspectRatioプロパティを追加しまし反応します。文書から

https://facebook.github.io/react-native/docs/layout-props.html#aspectratio

：

アスペクト比？：数

アスペクト比制御ノードの未定義の寸法の大きさ。 アスペクト比は非標準のプロパティで、反応ネイティブ でのみ使用でき、CSSでは使用できません。設定された幅/高さのアスペクト比制御とノードで

セットフレックス基本アスペクト比を有するノードで 解除寸法の大きさは を横断軸におけるノードの大きさを制御する場合のあるノードで解除a 測定機能のアスペクト比は、測定機能がフレックスベースを測定しているかのように機能します。フレックス拡大/縮小のアスペクト比のノードで は、未設定のアスペクト比 が最小/

したがって、次のように動作します。

const styles = StyleSheet.create({ 
    view: { 
    aspectRatio: 1.5, 
    } 
}); 

// later in render() 
<View style={styles.view} /> 

Answer 2

はい、Dimensions APIを使用してウィンドウの幅を取得し、プログラムで高さを設定できます。私は通常、あなたが幅を知る必要がある前に、アプリケーションがロードされるとすぐに次元を呼び出し、必要に応じてオブジェクトを渡します。

これは、使用例を実現するためのカスタムコンポーネントです。

import {Dimensions} from 'react-native' 

... 

const AspectView = ({style, aspectRatio, children, ...props}) => { 
    let {height, width} = Dimensions.get('window'); 
    return (
    <View style={[style, {height: width * aspectRatio}] {...props}>{children}</View> 
) 
}