- レスポンシブ対応の方法
- デバイスの画面幅を取得する方法
- 各デバイスによる判定条件
のやり方について解説した記事になっています。
1. Dimensionsコンポーネント
“reactnativeライブラリのDimensionsコンポーネント”と“getメソッド”を用いることで、デバイスの画面幅の情報を取得することができます。
1.1 実装
サンプルコード|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import React, { Component } from 'react'; import { View, Text, Dimensions, StyleSheet } from 'react-native'; const iPhoneWidth = Dimensions.get('window').width; const iPhoneHeight = Dimensions.get('window').height; export default class App extends Component { render() { return ( <View style={styles.container}> <View style={styles.boxs}> <Text style={styles.text}>{"幅: " + iPhoneWidth}</Text> <Text style={styles.text}>{"高さ: " + iPhoneHeight}</Text> </View> </View> ); } } const styles = StyleSheet.create({ container:{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: "hsla(0, 0%, 0%, 0.05)" }, boxs: { justifyContent: 'center', alignItems: 'center', borderColor: "black", borderWidth: 1, borderRadius: 10, width: iPhoneWidth/2, height: iPhoneHeight/4, }, text: { fontSize: iPhoneWidth/20, }, }); |
1.2 使い方
デバイスの画面幅の取得方法
|
1 2 |
const iPhoneWidth = Dimensions.get('window').width; const iPhoneHeight = Dimensions.get('window').height; |
| Dimensions.get(‘window’).width | デバイスの幅を取得 |
| Dimensions.get(‘window’).height | デバイスの高さを取得 |
レスポンシブ対応
取得したデバイス情報を使ってレスポンシブ対応する。下記のように各それぞれのスタイルに設定すれば、デバイスに合った幅や高さ、フォントサイズを設定することができます。
・デバイス毎にサイズを変えることができる
width: iPhoneWidth/2,
height: iPhoneHeight/4,
fontSize: iPhoneHeight/30,
このようにして、各デバイスに合ったのサイズに調整して(レスポンシブ対応)アプリを作っていきます。
2. 各デバイスによる判定条件
デバイス毎によって処理を変えたい時があると思います。
各デバイスの画面幅、高さは決まっているので、「取得した画面幅」と「条件判定で設定した画面幅」が同一なら”true”と言う処理を書くことでデバイス毎によって処理を変えることができます。
今回は、App.jsファイルの他にiPhoneSize.jsファイルを作成します。
2.1 実装
サンプルコードiPhoneSize.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
import { Dimensions } from 'react-native'; const Inch47_WIDTH = 375; // iPhone 6, 7, 8, SE(第2世代) const Inch47_HEIGHT = 667; // iPhone 6, 7, 8, SE(第2世代) const Inch55_WIDTH = 414; // iPhone 6s, 7Plus, 8Plus const Inch55_HEIGHT = 736; // iPhone 6s, 7Plus, 8Plus const Inch58_WIDTH = 375; // iPhone x, xs, 11Prp const Inch58_HEIGHT = 812; // iPhone x, xs, 11Pro const Inch65_WIDTH = 414; // iPhone xr, xsMax, 11, 11proMax const Inch65_HEIGHT = 896; // iPhone xr, xsMax, 11, 11proMax const IPAD_PRO_129_WIDTH = 1024; // iPad 12.9 const IPAD_PRO_129_HEIGHT = 1366; // iPad 12.9 const IPAD_PRO_11_WIDTH = 1112; // iPad 11 const IPAD_PRO_11_HEIGHT = 834; // iPad 11 const IPAD_PRO_97_WIDTH = 768; // iPad 9.7 const IPAD_PRO_97_HEIGHT = 1024; // iPad 9.7 const { width, height } = Dimensions.get('window'); // iPhone 6, 7, 8, SE(第2世代)対応 export const iPhoneInch47 = () => { return ( width === Inch47_WIDTH && height === Inch47_HEIGHT ); } // iPhone 6s, 7Plus, 8Plus対応 export const iPhoneInch55 = () => { return ( width === Inch55_WIDTH && height === Inch55_HEIGHT ); } // iPhone x, xs, 11Pro対応 export const iPhoneInch58 = () => { return ( width === Inch58_WIDTH && height === Inch58_HEIGHT ); } // iPhone xr, xsMax, 11, 11proMax対応 export const iPhoneInch65 = () => { return ( width === Inch65_WIDTH && height === Inch65_HEIGHT ); } // iPad 12.9対応 export const iPad129 = () => { return ( width === IPAD_PRO_129_WIDTH && height === IPAD_PRO_129_HEIGHT ); } // iPad 11対応 export const iPad11 = () => { return ( width === IPAD_PRO_11_WIDTH && height === IPAD_PRO_11_HEIGHT ); } // iPad 9.7対応 export const iPad97 = () => { return ( width === IPAD_PRO_97_WIDTH && height === IPAD_PRO_97_HEIGHT ); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import React, { Component } from 'react'; import { View, Text, Dimensions, StyleSheet } from 'react-native'; import { iPhoneInch47, iPhoneInch55, iPhoneInch58, iPhoneInch65, iPad129, iPad11, iPad97, } from './lib/iPhoneSize'; const { width, height } = Dimensions.get('window'); export default class App extends Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>{"幅: " + width}</Text> <Text style={styles.text}>{"高さ: " + height}</Text> { iPhoneInch47() ? <Text style={styles.text}>iPhone 6, 7, 8, SE(第2世代)です。</Text> : iPhoneInch55() ? <Text style={styles.text}>iPhone 6s, 7Plus, 8Plusです。</Text> : iPhoneInch58() ? <Text style={styles.text}>iPhone x, xs, 11Proです。</Text> : iPhoneInch65() ? <Text style={styles.text}>iPhone xr, xsMax, 11, 11proMaxです。</Text> : iPad129() ? <Text style={styles.text}>iPad 12.9です。</Text> : iPad11() ? <Text style={styles.text}>iPad 11です。 </Text> : iPad97() ? <Text style={styles.text}>iPad 9.7です。 </Text> : <Text style={styles.text}>nothing</Text> } </View> ); } } const styles = StyleSheet.create({ container:{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: "hsla(0, 0%, 0%, 0.05)" }, text: { fontSize: width/20, marginTop: width/10, }, }); |
2.2 使い方
iPhoneSize.js
iPhoneSize.jsファイルには、各デバイスの判定条件コードが書いてあります。例えば、Dimensions.get(‘window’)で取得した値(ユーザーが使用しているデバイス)が
windth=375, height=667
の場合、iPhoneInch47コンポーネントのみ返り値がtrueになリます。
他は、全て返り値がfalseになる。
あとは、このiPhoneSize.jsファイルの呼び出し先(App.js)で
「iPhoneInch47コンポーネント」がtrueの時の処理を書けば、デバイス毎によって処理を変えることができます。
App.js
App.jsファイルでiPhoneSize.jsファイルをインポートします。|
1 2 3 4 5 6 7 8 9 |
import { iPhoneInch47, iPhoneInch55, iPhoneInch58, iPhoneInch65, iPad129, iPad11, iPad97, } from './lib/iPhoneSize'; |
三項演算子
三項演算子を使って、デバイス毎による処理を実装します。三項演算子は、下記の画像のように
「条件 ? 条件がtrue時の処理 : 条件がfalse時の処理」
のようにソースコードを書きます。
