React Nativeで画面サイズ（幅）によってStyleを切り替えたい

Question

React Native初心者の者です。どうぞよろしくお願い致します。

現在、React Nativeを使用してWebアプリケーションを作成しております。React Nativeでのレスポンシブ対応の方法を
様々なライブラリがあるかと思いますが、今回はチームリーダーから「画面サイズによってStyleの切り替え」を行ってくださいと言われており、対応方法が分からず
手が止まっている状況です。

実現したいこととしては、
①レスポンシブ対応（ブレイクポイントは480を想定）
②画面サイズによって、Styleを切り替える の2点です。

※記述量はできるだけ少なく抑えたいです。

React nativeの知見・経験が豊富な方がいらっしゃいましたら、教えていただけますと幸いです。
どうぞよろしくお願い致します。

Sample.js

import React, {Component} from 'react';
import {View, Text, ScrollView, TouchableOpacity} from 'react-native';
import styles from './Styles/SampleStyle';

class SignUpScreen extends Component {
  state = {
  };
  render() {
    var {width, height, scale} = Dimensions.get('window');
    return (
　　　　<View style={styles.centerContainer}>
          <Text style={styles.title}>サンプル</Text>
       </View>
    );
  }
}
export default connect(
)(SignUpScreen);

SampleStyle.js

import {StyleSheet} from 'react-native';

export default StyleSheet.create({
　centerContainer: {
    width: 200,
    height: 300,
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
    marginBottom: 30,
});

※画面幅が480以下の時、以下のstyleに切り替わるようにしたいです。
centerContainer: {
    width: 100,
    height: 150,
  },
  title: {
    fontSize: 10,
    fontWeight: '700',
    marginBottom: 10,

Answer 1

私も勉強中ですが、私は　useWindowDimensions　を使いました。最近書いたのがあるので、簡単に書き直して載せます。参考になれば幸いです。

簡単ですがこんな感じです。

import * as React from 'react';
import {
  View, Text, StyleSheet, useWindowDimensions,
} from 'react-native';

const SignUpScreen = () => {
  // 閾値の設定
  const window = useWindowDimensions();
  const thresholdForWindowWidth = 480;
  const isNarrowWindow = (window.width <= thresholdForWindowWidth);
  return (
    <View style={isNarrowWindow ? styles.containerWide : styles.containerNarrow}>
      <Text style={isNarrowWindow ? styles.titleWide : styles.titleNarrow}>
        サンプル
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  // forWideWindow
  containerWide: {
    width: 200,
    height: 300,
  },
  titleWide: {
    fontSize: 20,
    marginBottom: 30,
    fontWeight: '700',
  },
  // forNarrowWindow
  centerContainerNarrow: {
    width: 100,
    height: 150,
  },
  titleNarrow: {
    fontSize: 10,
    marginBottom: 10,
    fontWeight: '700',
  },
});

export { SignUpScreen as default };

もしくは、

import 'react-native-gesture-handler';
import * as React from 'react';
import {
  View, Text, StyleSheet, useWindowDimensions,
} from 'react-native';

const SignUpScreen = () => {
  // 閾値の設定
  const window = useWindowDimensions();
  const thresholdForWindowWidth = 480;
  const isNarrowWindow = (window.width <= thresholdForWindowWidth);

  const styles = StyleSheet.create({
    centerContainer: {
      width: isNarrowWindow ? 200 : 100,
      height: isNarrowWindow ? 300 : 150,
    },
    title: {
      fontSize: isNarrowWindow ? 20 : 10,
      marginBottom: isNarrowWindow ? 30 : 10,
      fontWeight: '700',
    },
  });

  return (
    <View style={styles.centerContainer}>
      <Text style={styles.title}>
        サンプル
      </Text>
    </View>
  );
};

export { SignUpScreen as default };

と書きました。

もしuseWindowDimensionsではなくDimensionsを使うのであれば、

import 'react-native-gesture-handler';
import * as React from 'react';
import {
  View, Text, StyleSheet, Dimensions,
} from 'react-native';

const SignUpScreen = () => (
  <View style={styles.centercontainer}>
    <Text style={styles.title}>
      サンプル
    </Text>
  </View>
);

// 閾値の設定
const window = Dimensions.get('window');
const thresholdForWindowWidth = 480;
const isNarrowWindow = (window.width <= thresholdForWindowWidth);

const styles = StyleSheet.create({
  centerContainer: {
    width: isNarrowWindow ? 200 : 100,
    height: isNarrowWindow ? 300 : 150,
  },
  title: {
    fontSize: isNarrowWindow ? 20 : 10,
    marginBottom: isNarrowWindow ? 30 : 10,
    fontWeight: '700',
  },
});

export { SignUpScreen as default };

でしょうか。私はDImensionsは使ったことないですが、公式ページ(Dimensions)には、useWindowDimensions is the preferred API for React components. Unlike Dimensions, it updates as the window's dimensions update. This works nicely with the React paradigm.と書いてあります。