React Nativeの画面幅

Reactネイティブで画面幅を取得するにはどうすればよいですか？

（私は重複しているいくつかの絶対コンポーネントを使用しており、画面上のそれらの位置が異なるデバイスで変化するため、それが必要です）

React-Nativeでは、Dimensionsというオプションがあります

画像、テキスト、その他のコンポーネントを含む一番上の変数に寸法を含めます。

次に、スタイルシートで次のように使用できます、

ex: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}

このようにして、デバイスのウィンドウと高さを取得できます。

このコードを宣言してデバイスの幅を取得するだけです

let deviceWidth = Dimensions.get('window').width

多分それは明らかですが、Dimensionsは反応ネイティブのインポートです

import { Dimensions } from 'react-native'

寸法はそれなしでは機能しません

Componentから要求できるStyleコンポーネントがある場合は、ファイルの先頭に次のようなものを含めることができます。

const Dimensions = require('Dimensions');

const window = Dimensions.get('window');

そして、あなたはfulscreen: {width: window.width, height: window.height},あなたのスタイルコンポーネントで提供することができます。お役に立てれば

React Native Dimensionsはこの質問に対する部分的な回答にすぎません。私はここに来て、画面の実際のピクセルサイズを探しました。実際、Dimensionsは密度に依存しないレイアウトサイズを提供します。

React Native Pixel Ratioを使用して、画面の実際のピクセルサイズを取得できます。

DimenionsとPixelRatioの両方にimportステートメントが必要です

import { Dimensions, PixelRatio } from 'react-native';

オブジェクトのデストラチャを使用して、幅と高さのグローバルを作成したり、他の人が提案するようにスタイルシートに配置したりできますが、これはデバイスの再方向付けでは更新されないことに注意してください。

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

React Native Dimension Docsから：

注：寸法はすぐに利用可能ですが、（たとえば、デバイスの回転により）変更される可能性があるため、これらの定数に依存するレンダリングロジックまたはスタイルは、値をキャッシュするのではなく、すべてのレンダリングでこの関数を呼び出す必要があります>（たとえば、StyleSheetに値を設定するのではなく、インラインスタイルを使用します）。

PixelRatio好奇心旺盛な方のための Docsリンク。

実際に画面サイズを取得するには：

PixelRatio.getPixelSizeForLayoutSize(width);

または、幅と高さをグローバルにしたくない場合は、このようにどこでも使用できます

PixelRatio.getPixelSizeForLayoutSize(Dimensions.get('window').width);

React Nativeには、「react-native」からインポートする必要がある「Dimensions」APIが付属しています

import { Dimensions } from 'react-native';

そして、

<Image source={pic} style={{width: Dimensions.get('window').width, height: Dimensions.get('window').height}}></Image>

2020年4月10日回答：

を使用した提案された回答Dimensionsは現在推奨されていません。参照：https : //reactnative.dev/docs/dimensions

推奨されるアプローチはuseWindowDimensions、Reactでフックを使用することです。https://reactnative.dev/docs/usewindowdimensionsは、フックベースのAPIを使用し、画面の値が変更されると（たとえば、画面の回転時に）値を更新します。

import {useWindowDimensions} from 'react-native';

const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

注：useWindowDimensionsReact Native 0.61.0からのみ利用可能です：https ://reactnative.dev/blog/2019/09/18/version-0.61

たった2つの簡単なステップ。

1. import { Dimensions } from 'react-native' ファイルの上部。
2. const { height } = Dimensions.get('window');

これで、ウィンドウ画面の高さが変数heightに格納されます。

ちょうどreact-native-responsive-screen ここでレポを発見しました。とても重宝しました。

react-native-sensitive-screenは、React Native開発者がUI要素を完全にレスポンシブにコーディングできるように、2つのシンプルなメソッドを提供する小さなライブラリです。メディアクエリは必要ありません。

また、画面のオリエンテーション検出と新しい次元に応じた自動再レンダリングのオプションの3番目の方法も提供します。

を使用react-native-responsive-dimensionsすると、あなたのケースで少し良くなると思います。

あなたはまだ得ることができます：

およびを使用したデバイス幅 responsiveScreenWidth(100)

そして

およびを使用したデバイスの高さ responsiveScreenHeight(100)

マージンと位置の値を幅と高さの100％に比例させて設定することで、絶対コンポーネントの場所をより簡単に配置することもできます