React Native Text

概要: このチュートリアルでは、React NativeのTextコンポーネントについて学習し、モバイルアプリにテキストを表示する方法を学びます。

React Native Textコンポーネントの紹介

モバイルアプリにテキストを表示するには、Textコンポーネントを使用します。Textコンポーネントは、スタイリング、ネスト、タッチ処理をサポートしています。

Textコンポーネントを使用するには、次の手順に従います。

まず、react-nativeライブラリからTextコンポーネントをインポートします。

import {Text} from 'react-native';Code language: JavaScript (javascript)

次に、Textコンポーネント内にテキストを配置します。

<Text>Hi there!</Text>Code language: JavaScript (javascript)

Textコンポーネントのスタイリング

デフォルトでは、Textコンポーネントはデフォルトスタイルを使用してテキストをレンダリングします。たとえば、Textコンポーネントは黒色で、システムフォントファミリー（AndroidではRoboto、iOSではSF Proなど）を使用します。

Textコンポーネントにカスタムスタイルを適用するには、styleプロパティを使用します。Textコンポーネントは、フォントサイズ、色、配置など、さまざまなスタイルをサポートしています。

たとえば、次のコードはテキストのフォントサイズを16に設定し、中央揃えにします。

<Text style={{ fontSize: 16, textAlign: center }}>Hi there!</Text>Code language: JavaScript (javascript)

スタイルをコンポーネントから分離するには、StyleSheetを使用できます。次の例では、textスタイルを含むStyleSheetオブジェクトを作成し、Textコンポーネントで使用しています。

<Text style={styles.text}>Hi there!</Text>

// ...
const styles = StyleSheet.create({
    text: {
       fontSize: 16,
       textAlign: center
    }
});Code language: JavaScript (javascript)

完全な例を以下に示します。

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

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.text}>Hi, there!</Text>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    text: {
        fontSize: 16,
        textAlign: 'center',
    },
});

export default App;Code language: JavaScript (javascript)

Textコンポーネントのネスト

Textコンポーネントは、次のように互いにネストできます。

<Text>
   <Text>Learn from the best </Text>
   <Text>React Native Tutorial.</>
</Text>Code language: JavaScript (javascript)

React Nativeは、単一のテキストコンポーネントからテキストをそのままレンダリングします。

Learn from the best React Native Tutorial.Code language: JavaScript (javascript)

これは、テキストの異なる部分に異なるスタイルを適用する場合に便利です。

たとえば、「React Native チュートリアル」を太字にするには、次のようにします。

<Text>
    <Text>Learn from the best </Text>
    <Text style={{ fontWeight: 'bold' }}>React Native Tutorial</Text>
</Text>Code language: JavaScript (javascript)

さらに、ネストされたテキストコンポーネントは、親テキストコンポーネントのスタイルを自動的に継承します。たとえば、親Textコンポーネントのフォントサイズを40に設定すると、ネストされたTextコンポーネントのフォントサイズも40に設定されます。

<Text style={{ fontSize: 40 }}>
   <Text>Learn from the best </Text>
   <Text style={{ fontWeight: 'bold' }}>React Native Tutorial</Text>
</Text>Code language: JavaScript (javascript)

完全なコンポーネントを以下に示します。

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

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={{ fontSize: 40 }}>
               <Text>Learn from the best </Text>
               <Text style={{ fontWeight: 'bold' }}>React Native Tutorial</Text>
            </Text>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

export default App;Code language: JavaScript (javascript)

出力

タッチイベントの追加

Textコンポーネントを押すと、押下イベントに応答できます。次の例は、テキストコンポーネントをボタンとしてスタイル設定し、押下イベントを処理する方法を示しています。

import { Text, StyleSheet, SafeAreaView, Alert } from 'react-native';

const App = () => {
    const handlePress = () => Alert.alert('Text Pressed!');
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.button} onPress={handlePress}> Click me</Text>
        </SafeAreaView >
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    button: {
        fontSize: 18,
        textAlign: 'center',
        padding: 10,
        borderRadius: 99,
        fontWeight: 'bold',
        color: '#fff',
        backgroundColor: 'black',
    }
});

export default App ;Code language: JavaScript (javascript)

出力

Textコンポーネントにはカスタムフォントを使用できます。ただし、カスタムフォントをTextコンポーネントに適用する前に、アプリにロードする必要があります。

まとめ

• React Native Textコンポーネントを使用して、モバイルアプリにテキストを表示します。