web-dev-qa-db-ja.com

React Nativeのスタイルのデフォルト単位は何ですか？

私は、React Native。

これは、引き出し用の材料設計の公式仕様です。

According to the spec of Material Design

上記の画像では、測定の[〜＃〜] unit [〜＃〜]はdp。

しかし、私のReactネイティブコードでは、そのようなユニットは言及されていないようです。 "react native"を考慮すると、pxまたはdp。

React Native for Style コンポーネントの公式ドキュメントも調べました。どこにも言及はありません。

私のコードは次のように見えます

const styles = {
    touchable: {
        paddingHorizontal: 16,
        marginVertical: 8,
        height: 48
    },
    item: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    icon: {
        position: 'relative',
    },
    value: {
        flex: 1,
        paddingLeft: 34,
        top: 2
    },
    label: {
        top: 2
    }
},

これがピクセルかdpかを教えてください。また、1px = 1dp？

androidcssreactjsmaterial-designreact-native
29
bozzmob

ブラウザで慣れ親しんでいる開発者コンソールで積極的に検査することはできません。

私は「dp」ユニットに精通していませんが、私が集めたものからwidth: 1は、画面のピクセル密度に応じて、デバイスごとに異なるレンダリングを行います（リンクを参照）。反応ネイティブドキュメントの情報は、1は、ピクセル密度が高い画面ではより太く表示されます。高密度の画面では、低密度の画面よりも精度が高く、反応性が高いため、普遍的であるため、高dpiを想定しないため、論理的に聞こえます。

以下のリンクされたPixelRatio APIを使用して詳細要素のサイズを計算し（境界線、アイコンなどを考えて）、デバイスの画面密度に応じてレンダリングされたサイズを動的に調整できることを理解しています。

https://facebook.github.io/react-native/docs/pixelratio.html#content

16
Mosselman

docs から：

React Nativeのすべての寸法は単位がなく、密度に依存しないピクセルを表します。この方法で寸法を設定することは、画面の寸法に関係なく常に同じサイズでレンダリングするコンポーネントに共通です。

はい、React Nativeの単位はdpにあります。ピクセルに変換する場合は、PixelRatio.getPixelSizeForLayoutSize()を使用します

37
Nick

ピクセル比を考慮する必要があります。ピクセルは絶対値を表します。ピクセル比は相対値です。アプリの画面とコンポーネントをレスポンシブにするには、ピクセル比を使用する必要があります。

私はすでに複数のアプリで使用しています。そして、私はそれがあなたがそれをしなければならない方法だと思います。これがあなたの質問に答えることを願っています。

4
Niharika Neeraj

私が知っていることから、react jsまたはreact nativeで使用するjavascriptスタイルはピクセルを使用します。ピクセル比は、さまざまなサイズのモバイルデバイス画面をサポートするためにのみ必要です。

3
Ranjith Srikanth