React-Native でテキストを垂直方向に揃える

この記事では、React-native でテキストを縦に揃える方法を学びます。 以下のメソッドを使用して、テキストだけでなく、React-native の任意のコンポーネントを配置できます。

justifyContent および flex プロパティを使用して、React-Native でテキストを中央に垂直に揃えます

ユーザーは任意のコンポーネントの CSS をカスタマイズして、垂直方向に配置できます。 CSS の justifyContent および flex プロパティを使用して、テキストを垂直方向の中央、下部、またはその他の位置に揃えることができます。

以下の例では、子コンポーネントとして Text コンポーネントを含む View コンポーネントを使用してコンテナを作成しています。 また、center スタイルを作成し、View コンポーネントに適用しました。

center スタイルでは、View コンポーネントがどのように成長するかを表す flex: 1 を追加しました。 CSS flex プロパティを持つ View コンポーネントは 1つしかないため、高さは 100% になり、justifyContent: center は flex に従ってサイズを考慮して View コンポーネントのコンテンツを中央揃えにします。 財産。

コード例:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={styles.center}>
      <Text>This is vertically Center Text.</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
  },
});

出力：

上記の出力では、テキストが垂直方向の中央に配置されていることがわかります。

alignItems および flex CSS プロパティを使用して、React-Native でテキストを中央に垂直に揃えます

justifyContent CSS プロパティのように、alignItems を使用すると、テキストを垂直方向に中央揃えにすることもできます。 alignItems CSS プロパティに center 値を使用すると、テキストが垂直方向の中央に配置されます。

また、このプロパティを alignItems CSS プロパティと共に使用して、コンテナの拡大方法を設定する必要があります。 簡単に言うと、flex プロパティはコンポーネントの高さを定義し、その高さに応じて alignItems プロパティがテキストを揃えます。

以下の例では、2つの Text コンポーネントを作成し、flexDirection: ‘row’ CSS を親 View コンポーネントに適用して、すべての Text コンポーネントを 1 行に表示しています。

また、親の View コンポーネントでは、コンポーネントの高さを 100% に設定する flex:1 スタイルと、テキストを垂直方向の中央に配置する alignItems: center を適用しました。

コード例:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={{ flexDirection: "row", alignItems: "center", flex:1, }}>
      <View>
        {" "}
        <Text style={{fontSize:30,}}>Hi</Text>{" "}
      </View>
      <View>
        {" "}
        <Text style={{fontSize:30,}}>There</Text>{" "}
      </View>
    </View>
  );
}

出力：

ユーザーがテキストを下に揃えたい場合は、alignItems CSS プロパティの値を flex-end に変更し、上の変更値を flex-start に変更する必要があります。

テキストを下に揃えるために、ユーザーは以下のサンプル コードに従うことができます。

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  return (
    <View style={{ flexDirection: "row", alignItems: "flex-end", flex: 1 }}>
      <Text style={{ fontSize: 30 }}>Text at bottom</Text>{" "}
    </View>
  );
}

出力：

上記の出力では、alignItems の値を flex-end に設定しているため、テキストが下部に配置されていることがわかります。

ユーザーは、この記事でテキストを縦に揃えるさまざまな方法を学びました。 ユーザーは justifyContent または alignItems CSS プロパティを flex CSS プロパティと共に使用できます。

ここでは、コンテナーの高さを設定するために flex プロパティのみを使用しました。 ユーザーは高さを手動で設定することもできます。