React Native 絶対位置指定

概要: このチュートリアルでは、相対位置と絶対位置を使用して、flexboxレイアウトにコンポーネントを配置する方法を学習します。

相対位置指定

React Nativeは、画面上のコンポーネントを配置するためにflexboxレイアウトを使用します。デフォルトでは、各コンポーネントのpositionプロパティはrelativeです。

{ 
   position: 'relative'
}Code language: JavaScript (javascript)

{ position: 'relative ' }は、コンポーネントがflexboxレイアウト内の*元の位置に対して相対的に*配置されることを意味します。

React Nativeでは、top、right、bottom、leftプロパティを使用して、コンポーネントを元の位置に対して相対的に配置できます。

たとえば、以下は大きな緑色のボックスと小さな黄色のボックスを示しています。

「右に100移動」ボタンをクリックすると、小さな黄色のボックスがflexboxレイアウト内の元の位置から右に100単位移動します。

import { View, Text, StyleSheet, SafeAreaView, Button } from 'react-native';
import { useState } from 'react';

const PositionRelative = () => {
    const [position, setPosition] = useState({});

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.app}>
                <View style={styles.actions}>
                    <Button title="Move to the right 100" onPress={() => { setPosition({ left: 100 }); }} />
                    <Button title="Reset" onPress={() => { setPosition({}); }} />
                </View>

                <View style={styles.layout}>
                    <Text style={styles.bigBox}>React Native</Text>
                    <Text style={[styles.box, position]}>React</Text>
                </View>

            </View>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    app: {
        flex: 1,
        padding: 20,
        alignItems: 'flex-start',
    },

    layout: {
        borderColor: '#EE5013',
        borderWidth: 1,
    },
    bigBox: {
        marginBottom: 10,
        position: 'relative',
        padding: 10,
        backgroundColor: '#78B500',
        height: 100,

    },
    box: {
        marginBottom: 10,
        position: 'relative',
        padding: 10,
        backgroundColor: '#FFD966'
    },
    actions: {
        alignSelf: 'stretch',
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 20,
    }
});

export default PositionRelative;
Code language: JavaScript (javascript)

絶対位置指定

relative位置に加えて、コンポーネントのpositionをabsoluteに設定できます。

{
   position: 'absolute'
}Code language: JavaScript (javascript)

この場合、React Nativeはコンポーネントをflexboxフローレイアウトから削除し、最も近い包含コンポーネントに配置します。

次の図では、大きな緑色のボックスと小さな黄色のボックスの2つのボックスを含むViewもあります。

「絶対位置に変更」ボタンをクリックすると、小さな黄色のボックスのdisplayプロパティがabsoluteに変更され、コンポーネントがViewに対して再配置されます。

絶対位置指定は、小さな黄色のボックスの位置のみを変更することに注意してください。 alignItems: 'flex-start'のようなflexboxの他のプロパティは変更されません。

位置を絶対値に設定すると、包含コンポーネント内でtop、right、left、bottomプロパティを使用してコンポーネントの位置を制御することもできます。これらのプロパティは、正の値と負の値の両方を受け入れます。

たとえば、以下は、絶対位置指定を使用して、アイテム数を示すカートアイコンを作成する方法を示しています。

import { StyleSheet, Text, View, SafeAreaView } from 'react-native'
import Icon from '@expo/vector-icons/MaterialCommunityIcons';

const Cart = () => {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.app}>
                <View style={styles.cart}>
                    <Icon name="cart-outline" size={32} color="#4B4942" />
                    <Text style={styles.cartText}>5</Text>
                </View>
            </View>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    app: {
        flex: 1,
        padding: 20,
    },
    cartText: {
        backgroundColor: '#EE5013',
        width: 20,
        height: 20,
        borderRadius: 10,
        textAlign: 'center',
        color: '#fff',
        fontSize: 14,
        position: 'absolute',
        left: 15,
        top: -10
    }
});

export default Cart;Code language: JavaScript (javascript)

まとめ

• position relativeを使用して、コンポーネントを元の位置に対して移動します。
• position absoluteを使用して、コンポーネントをflexboxレイアウトフローから削除し、最も近い包含コンポーネントに再配置します。
• top、right、bottom、leftプロパティを使用して、コンポーネントを配置します。