web-dev-qa-db-ja.com

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

私はreact-nativeでアプリケーションを開発しています。 iPhone 6では正常に動作するUIを作成しましたが、iPhone5以下のバージョンでは正常に動作しません。これをどのように修正すればよいですか？

user-interfacereact-nativescreen-size
7
rajat44

固定の幅と高さを使用してアプリを設計しましたか？間違いなくflexboxの機能を使用し、固定サイズの設定をできるだけ避けるようにしてください。 flexプロパティ を使用して、_<View />_は他の人との関係を使用する必要があり、そのページの他のプロパティを使用して、さまざまな画面サイズで目的の結果が得られるように要素を柔軟にレイアウトできます。

_<ScrollView />_ が必要な場合もあります。

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

6
hanse

UIを構築するときは、proportionについて考える必要があります。

1、幅にはpercentage(%)を使用し、高さにはaspectRatioを使用します。その逆も同様です。

container: {
    width: "100%",
    aspectRatio: 10 / 3, //height will be "30%" of your width
}

2、ジョブの割合にflexを使用することはできません。たとえば、リストに任意のサイズのアイテムがあり、それらを共有したい場合等しいサイズ。それぞれにflex: 1を割り当てます

3、ピクセルの代わりにEStyleSheetのremを使用してください 。 remはスケールfatorです。たとえば、remが2で、「11rem」が「11 * 2」=「22」になる場合です。画面サイズにremの比率を設定すると、UIは任意の画面サイズに合わせて拡大縮小されます。

//we define rem equals to the entireScreenWidth / 380
const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});

//how to use rem
container: {
    width: "100%",
    aspectRatio: 10 / 3, //height will be "30%"
    padding: "8rem", //it'll scale depend on the screen sizes.
}

4、ボックスからスケールアウトする可能性のあるコンテンツにはscrollViewを使用します。たとえば、TextView

5、ピクセルの使用を検討するたびに、方法3でremを使用することを検討してください。

詳細な説明については、こちらの記事をご覧ください。 開発するための7つのヒントReactすべての画面サイズのネイティブUI

11
Shane Rudolf

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

_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
    }
})
_

TabbarIOSを使用している場合は、Dimensions.get('window')で画面の高さが全体になることに注意してください。これは、タブバーが修正されていることを考慮する必要があることを意味します。 -高さ56。たとえば、TabbarIOSを使用する場合：

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

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

6
Alberto Dallaporta