React Nativeでテキストの一部をスタイル付きで表示する方法


  1. Textコンポーネントを使用してテキストを表示します。例えば、以下のようにします:
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
  return (
    <View>
      <Text>
        こんにちは、<Text style={{ fontWeight: 'bold' }}>React Native</Text>の使い方を学びましょう!
      </Text>
    </View>
  );
}
export default App;
  1. テキストの一部をスタイル付きで表示するには、Textコンポーネント内でTextコンポーネントをネストします。スタイルは内部のTextコンポーネントに適用されます。例えば、上記のコードでは"React Native"の部分が太字で表示されます。

  2. スタイルは、styleプロパティを使用して指定します。例えば、上記のコードではfontWeight: 'bold'を使用して太字に設定しています。

  3. テキストの他の部分にも異なるスタイルを適用する場合は、同様の方法でTextコンポーネントをネストします。例えば、以下のコードでは"こんにちは"の部分にもスタイルを適用しています。

import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
  return (
    <View>
      <Text>
        <Text style={{ color: 'red' }}>こんにちは</Text>、
        <Text style={{ fontWeight: 'bold' }}>React Native</Text>の使い方を学びましょう!
      </Text>
    </View>
  );
}
export default App;

以上の手順に従うことで、React Nativeでテキストの一部をスタイル付きで表示することができます。この方法を使用すると、必要な部分に対して異なるスタイルを適用できます。