- 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;
-
テキストの一部をスタイル付きで表示するには、Textコンポーネント内でTextコンポーネントをネストします。スタイルは内部のTextコンポーネントに適用されます。例えば、上記のコードでは"React Native"の部分が太字で表示されます。
-
スタイルは、styleプロパティを使用して指定します。例えば、上記のコードでは
fontWeight: 'bold'
を使用して太字に設定しています。 -
テキストの他の部分にも異なるスタイルを適用する場合は、同様の方法で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でテキストの一部をスタイル付きで表示することができます。この方法を使用すると、必要な部分に対して異なるスタイルを適用できます。