ReactNative Text

📕Overview

テキストを表示するための React コンポーネント。 テキストは、ネスト、スタイル設定、およびタッチ処理をサポートしています。 次の例では、ネストされたタイトルと本文テキストは、styles.baseText から fontFamily を継承しますが、タイトルは独自の追加スタイルを提供します。 タイトルと本文は、リテラルの改行によって互いに重なって表示されます。

import React, {useState} from 'react';
import {Text, StyleSheet} from 'react-native';

const TextInANest = () => {
  const [titleText, setTitleText] = useState("Bird's Nest");
  const bodyText = 'This is not really a bird nest.';

  const onPressTitle = () => {
    setTitleText("Bird's Nest [pressed]");
  };

  return (
    <Text style={styles.baseText}>
      <Text style={styles.titleText} onPress={onPressTitle}>
        {titleText}
        {'\n'}
        {'\n'}
      </Text>
      <Text numberOfLines={5}>{bodyText}</Text>
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

export default TextInANest;

🧷summary

公式のコードを、App.tsxでimportしてビルドするとネストしたテキストを表示することができます。

import TextInANest from "./components/TextInANest";

export default function App() {
  return (
    <TextInANest />
  );
}

🧑‍🎓thoughts

今回は、ReactNativeでテキストをViewに表示してみました。これがHTMLだったら、h1とかpタグを使いますが、モバイルだとコードが違って、Viewなんですね。。。。