反応するネイティブで異なる画面サイズを処理する方法は？

Question

私は反応ネイティブでアプリケーションを開発しています。私はiPhone 6でうまく動作するUIを作ったが、iPhone 5以降のバージョンでうまく動作しない。 これはどのように修正する必要がありますか？

Answer 1

固定幅と高さを使用してアプリをデザインしましたか？あなたは間違いなくflexboxの機能を使用し、可能な限り固定サイズの設定を避けてください。 flex propertyは、<View />が他のものに関連してどれくらいのスペースを使用するかを定義するために使用でき、そのページの他のプロパティを使用して、さまざまな画面サイズの範囲で望ましい結果を得られるように柔軟に要素をレイアウトできます。

場合によっては<ScrollView />が必要な場合もあります。

固定サイズが必要な場合は、Dimensions.get('window')を使用できます。

Answer 2

画面サイズに応じて動的にサイズを計算する必要があります。

import { Dimensions, StyleSheet } from 'react-native' 

[...] 

const { width, height } = Dimensions.get('window') 

[...] 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1. 
     flexDirection: 'column', 
    }, 
    myView: { 
     width: width * 0.8, // 80% of screen's width 
     height: height * 0.2 // 20% of screen's height 
    } 
}) 

あなたはDimensions.get('window')はあなた全体画面の高さを与えることを覚えて、TabbarIOSを使用している場合、これはあなたがタブバーは、例えばだから、56 の高さを固定していることを考慮に取る必要がありますことを意味し、使用時TabbarIOS：

const WIDTH = Dimensions.get('window').width, 
     HEIGHT = Dimensions.get('window').height - 56 

次に、上記のようにWIDTHとHEIGHTを使用します。