ReactNative レスポンシブに対応したコンポーネントを作成したい

Question

ReactNativeでアプリ開発を行う際に様々なモバイル端末の大きさに合わせて、
ボタンや背景などのデザインやUIをCSSで定義することがあるのですが、端末によって画面の幅、高さが異なるため、
全ての端末に適した比率のコンポーネントを作るための方法（計算）を知りたいです。

CSS自体触れるのが初めてなので、あまりまだ理解していない部分がありサイトや本をみて学習中です。

上記のような各端末に適したサイズのコンポーネントを作成するために参考になるサイトなどがありましたら教えていただけないでしょうか？

Answer 1

React NativeのAPIに，Dimensionsというものがあります.
これを使えば，次のように端末の高さや幅を取得することが出来ます．

import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('screen').width;
const windowHeight = Dimensions.get('screen').height;

そして，例えば画面幅の70％の横幅にしたいときは,

<View style={{width: windowWidth * 0.7}}>
    <SomeConponent/>
</View>

のようにすれば意図した挙動になると思います．

以下のリンクが参考になるかと．
https://qiita.com/mogamin3/items/1aad5fd2d03fb54e0dbf
https://bagelee.com/programming/react-native/react-native-layout/