React ネイティブ テキスト スタイル

React Native では、テキストを太字、斜体、または下線付きにしたい場合があります。 この記事では、React Native の太字、斜体、または下線付きのテキストでテキストを作成する方法について説明します。

React ネイティブ テキスト スタイル

React Native でスタイルを使用して、テキストを太字、斜体、または下線付きにする場合があります。

構文：

const styles = StyleSheet.create({
  bold: {fontWeight: 'bold', fontSize: 30},
  italic: {fontStyle: 'italic', fontSize: 32},
  underline: {textDecorationLine: 'underline', fontSize: 34},
});

ご覧のとおり、bold、italic、および underline を含むスタイルシートを作成します。 スタイル fontWeight は bold に設定され、テキストを太字にします。

同様に、斜体の場合、斜体は、テキストが右に傾いていることを示すテキストのスタイルです。 スタイル fontStyle は italic として設定され、テキストを斜体にします。

同様に、テキストに下線を引くには、textdecorationLine を underline. として使用してテキストのスタイルを設定します。

コード例:

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

const App = () => {
  return (
      <View><Text style = {styles.bold}>You are
          bold</Text>
      <Text style={styles.italic}>You are italic</Text>
      <Text style = {styles.underline}>You are underline</Text>
    </View>);
};

const styles = StyleSheet.create({
  bold: {fontWeight: 'bold', fontSize: 30},
  italic: {fontStyle: 'italic', fontSize: 32},
  underline: {textDecorationLine: 'underline', fontSize: 34},
});

export default App;

まず、この例の要件を React Native からインポートします。 次に、プライマリ関数は、テキスト コンポーネントを含むビュー コンポーネントを作成します。

テキストを装飾的にするために、前のコードで言及したいくつかのスタイルを使用しました。 fontWeight、fontStyle、およびテキスト装飾線をそれぞれ太字、斜体、および下線として含むスタイルシートを作成しました。

太字、斜体、および下線付きのテキストは、上から下に並べ替える必要があります。

出力：

React Native でスタイルを使用して、テキストを太字、斜体、または下線付きにする場合があります。