📐

React Native View の比率を 4:3、16:9 にする

2022/09/04に公開約600字

aspectRatio を使用します。

<View style={{ width: "100%", aspectRatio: 4/3}} />
<View style={{ width: "50%", aspectRatio: 16/9]} />

https://snack.expo.dev/@tadaedo/c21d96

画像の比率を指定

画像の場合は 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' }} />

https://snack.expo.dev/@tadaedo/aspectratio-example2

Discussion

ログインするとコメントできます