React Nativeで複数のデバイスレイアウトを適用するには？

Question

私はReact Nativeの初心者ですので、私は非常にダンプの質問をしています。あなたの時間を無駄にしてくれてください。

私はReact Nativeアプリで複数のデバイスレイアウトを適用する必要があります。私のアプリケーション画面の外観は全く異なりますが、モバイルやタブレットデバイスでは同じビジネスプロセスがあるとします。

どのように私はReact Nativeでこれを達成できますか？どこから掘り出し始めるのですか？

Answer 1

私も初心者だ、と、私は理解し、そしてhereから抽出したものから、二つの方法があります。プラットフォーム固有のファイルのように名前を付けることができます（推奨）ファイルに名前を付けることで

は、それぞれ、 とiOSの場合、[ファイル名] .android.js "と" [ファイル名] .ios.js "です。 [filename]をインポートまたは要求すると、ホストプラットフォームに応じてファイルが で取得されます。たとえば、ソースコードに条件文を追加することで

に、あなたがiOSと Androidのために異なる色でナビゲーションバーの背景をしたい場合は、我々は次のコードを記述することができます。もちろん

Code: backgroundColor: (Platform.OS === ‘ios’) ? ‘gray’ : ‘blue’ 

をofficial documentationをご覧ください。

Answer 2

あなたがOSに基づいてスタイリングされている場合@anfucaで述べたように、あなたがPlatformを使用することができますそれに応じて https://www.npmjs.com/package/react-native-device-detection

Answer 3

モバイルやタブレットを検出するためのデバイスの検出を使用して、モバイルおよびタブレット用の独立したスタイリングを使用することができます。あなたは、タブや電話、すなわち、便利なモジュールreact-native-device-detection

があるデバイスに基づいてスタイルする必要がある場合にはどこもあなたがグローバルスタイルファイルを作成することができ、あなたのスタイルファイルに

import Device from 'react-native-device-detection'; 

// Mobile Styles 
let imageSize = 60; 
// Tablet Styles 
if(Device.isTablet) { 
    imageSize = 120; 
} 

をこのような何かを行うことができますフォントサイズとデバイス/ピクセル比に基づくすべてを定義できます。

commonstyle.js

import Device from 'react-native-device-detection'; 

let h1 = 20; 
let h2 = 18; 
let h3 = 16; 
if(Device.isTablet) { 
    h1 = 25; 
    h2 = 22; 
    h3 = 20; 
} 

module.exports = { 
    h1, 
    h2, 
    h3 
};