📐
React Native View の比率を 4:3、16:9 にする
aspectRatio を使用します。
<View style={{ width: "100%", aspectRatio: 4/3}} />
<View style={{ width: "50%", aspectRatio: 16/9]} />
画像の比率を指定
画像の場合は onLoad から画像のサイズが取得できるため比率を計算してセットします。
const [ratio, setRatio] = useState(0);
<Image
style={{ width: "100%", aspectRatio: ratio }}
onLoad={({nativeEvent: { source: { width, height }}}) => setRatio(width / height)}
source={{ uri: 'https://picsum.photos/300/400' }} />
Discussion