React Native 絶対位置

Shiv Yadav 2024年2月15日

React Native のすべてはデフォルトで相対位置に設定されていますが、絶対位置は常に親に関連付けられています。 React Native での位置は、標準の CSS に匹敵します。

React Native 絶対位置

子を親に対して一定量の論理ピクセルだけ相対的に配置する場合は、絶対位置を持つように子を設定します。

例を見てみましょう。

<>
  <View
    style={{
      marginTop: 40,
      height: 100,
      backgroundColor: "#ccc",
    }}
  >
    <View
      style={{
        height: 100,
        width: 100,
        backgroundColor: "red",
        position: "absolute",
        right: 0,
        bottom: 0,
      }}
    />
  </View>
</>

上記のコードはメインの view コンポーネントを示しています。メインコンポーネント内には、子 view コンポーネントがあります。

親コンポーネントを変更すると、子コンポーネントは親コンポーネント内に残ります。

出力：

絶対位置

このスクリーンショットでは、2つのコンポーネントが表示されています。つまり、1つは灰色で、もう 1つは赤色です。灰色のコンポーネントは親コンポーネントで、赤のコンポーネントは子コンポーネントです。

親コンポーネントに変更を加えた場合 (高さを 100%、つまり flex = 1 にするなど)、子コンポーネントは親コンポーネントに残ります。

<>
<View style={{
        flex: 1,
        marginTop: 40,
        backgroundColor: '#ccc',

      }}>
        <View style={{
          height: 100,
          width: 100,
          backgroundColor: 'red',
          position: 'absolute',
          right: 0,
          bottom: 0,

        }} />
      </View>

    </>

出力：

絶対位置 2

著者： Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

React Native 絶対位置

関連記事 - React Native