HOWTO · React Native
React Native 絶対位置
この記事は、React-Native での絶対位置について理解するのに役立ちます。
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>
</>
出力：
