React Native TextInput（テキスト入力）

概要: このチュートリアルでは、React NativeのTextInputコンポーネントを使用して、アプリにテキスト入力フィールドを作成する方法を学習します。

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

TextInputコンポーネントを使用すると、テキスト入力フィールドを作成できます。TextInputコンポーネントを使用する手順は以下のとおりです。

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

import TextInput from 'react-native';Code language: JavaScript (javascript)

次に、React NativeコンポーネントにTextInputを追加します。

const App = () => {
  return (
    <SafeAreaView>
      <TextInput />
    </SafeAreaView>
  )
}Code language: JavaScript (javascript)

完全なアプリのコードは以下のとおりです。

import { StyleSheet, SafeAreaView, TextInput } from 'react-native'

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <TextInput />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },

});

export default App;Code language: JavaScript (javascript)

出力

デフォルトでは、TextInputコンポーネントにはスタイルがないため、認識しにくいです。使いやすくするために、TextInputコンポーネントにスタイルを追加しましょう。

TextInputのスタイリング

TextInputコンポーネントの外観を変更するには、styleプロパティを使用します。

styleプロパティを使用すると、境界線の追加やフォントサイズの変更など、テキスト入力にカスタムスタイルを適用できます。

例：

import { StyleSheet, SafeAreaView, TextInput } from 'react-native'

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <TextInput style={styles.input} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },
});

export default App;Code language: JavaScript (javascript)

出力

プレースホルダーの追加

プレースホルダーは、TextInputに値がない場合に表示されます。TextInputコンポーネントにプレースホルダーを追加するには、placeholderプロパティを使用します。

import { StyleSheet, SafeAreaView, TextInput } from 'react-native'

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter your name" />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },
});

export default App;Code language: JavaScript (javascript)

出力

ユーザー入力の追跡

ユーザー入力を追跡するには、useStateフックを使用します。たとえば、次のアプリはテキスト入力を追跡し、Textコンポーネントに表示します。

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

const App = () => {
  const [name, setName] = useState('');

  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        value={name}
        onChangeText={setName} />
      <Text style={styles.output}>You entered: {name}</Text>
    </SafeAreaView>
  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },
  output: {
    fontSize: 16,
  }
});

export default App;Code language: JavaScript (javascript)

仕組み

まず、useStateフックを使用して、状態変数nameを定義します。

const [name, setName] = useState('');Code language: JavaScript (javascript)

次に、valueプロパティをname変数に、onChangeプロパティをsetName関数に設定します。

<TextInput
   style={styles.input}
   placeholder="Enter your name"
   value={name}
   onChangeText={setName} />Code language: JavaScript (javascript)

3番目に、入力されたテキストをTextコンポーネントに表示します。

<Text style={styles.output}>You entered: {name}</Text>Code language: HTML, XML (xml)

出力

ラベルの追加

通常、TextInputコンポーネントにはラベルが付いています。そのためには、TextInputとTextコンポーネントを次のように組み合わせることができます。

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

const App = () => {
  const [name, setName] = useState('');

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.label}>Name:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        value={name}
        onChangeText={setName} />
    </SafeAreaView>
  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,

    fontSize: 16,
  },
  output: {
    fontSize: 16,
  }
});

export default App;Code language: JavaScript (javascript)

キーボードの表示

TextInputにフォーカスを移動すると、デフォルトのキーボードが表示されます。キーボードの種類を変更するには、keyboardTypeプロパティを使用します。keyboardTypeプロパティは次の値を受け入れます。

keyboardType	説明
`default`	デフォルトのキーボードを表示します。
`number-pad`	小数点のない数字キーボードを表示します。
`decimal-pad`	小数点付きの数字キーボードを表示します。
`numeric`	数字と記号を含む数字キーボードを表示します。
`email-address`	「@」と「.」を含む、メール入力に最適化されたキーボードを表示します。
`phone-pad`	数字と記号を含む数字キーボードを表示します。
`電話番号入力用のキーボードを表示します。`	url

「/」と「.」を含む、URL入力に最適化されたキーボードを表示します。.

AndroidとiOSのキーボードの種類のリストは次のとおりです。

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

const TextInputDemo = () => {

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.label}>Name:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
      />

      <Text style={styles.label}>Email:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your work email"
        keyboardType="email-address"
      />

      <Text style={styles.label}>Phone:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your work email"
        keyboardType="phone-pad"
      />


      <Text style={styles.label}>Website:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your homepage"
        keyboardType="url"
      />

    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },
  output: {
    fontSize: 16,
  }
});

export default TextInputDemo;Code language: JavaScript (javascript)

たとえば、以下は、さまざまなキーボードタイプの`TextInput`コンポーネントを示しています。

安全な入力

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

const App = () => {

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.label}>Email:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your email"
        keyboardType="email-address"
      />

      <Text style={styles.label}>Password:</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your pasword"
        secureTextEntry={true}
      />

    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },

});

export default App;Code language: JavaScript (javascript)

出力

パスワードなどの機密テキストを非表示にするには、`secureTextEntry`プロパティを`true`に設定します。例：

複数行入力

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

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.label}>Address:</Text>
      <TextInput
        style={styles.textarea}
        multiline={true}
        numberOfLines={5}
        placeholder="400 North 5th Street"

      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  textarea: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,

  },
  output: {
    margin: 32,
    fontSize: 16,
  }
});

export default App;Code language: JavaScript (javascript)

出力

ユーザーが複数行入力できるようにするには、`multiline`プロパティを`true`に設定します。また、`numberOfLines`プロパティを使用して、`TextInput`の行数を指定することもできます。

自動修正

<TextInput autoCorrect={false} />Code language: HTML, XML (xml)

デフォルトでは、TextInputコンポーネントは自動修正が有効になっています。ユーザー名フィールドなど、無効にしたい場合は、`autoCorrect`プロパティをfalseに設定します。例：

自動大文字化

TextInputに入力テキストを自動的に大文字にするように指示するには、`autoCapitalize`プロパティを次のいずれかの値に設定します。	説明
`autoCapitalize`	characters
`すべての文字を大文字にします。`	words
`各単語の最初の文字を大文字にします。`	sentences
`各文の最初の文字を大文字にします。これがデフォルト値です。`	none

文字を大文字化しません。

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

const App = () => {

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.label}>Username:</Text>
      <TextInput
        style={styles.input}
        autoCapitalize="none"
        autoCorrect={false}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#ccc',
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginVertical: 12,
    fontSize: 16,
  },
});

export default App;
Code language: JavaScript (javascript)

出力

たとえば、以下は、`autoCapitalize`プロパティが「none」に設定されているTextInputを定義する方法を示しています。

オートコンプリート

TextInputにオートコンプリートのヒントを指定すると、プラットフォーム（AndroidまたはiOS）が自動入力機能を提供します。

ヒントを設定するには、autoCompleteプロパティを特定の値とともに使用します。オートコンプリートを無効にするには、値をoffに設定します。

<TextInput autoCompleteType="email" />Code language: HTML, XML (xml)

たとえば、以下は、`autocomplete`を`email`に設定しています。

まとめ
アプリにテキスト入力を作成するには、TextInputコンポーネントを使用します。
TextInputコンポーネントにスタイルを追加するには、styleプロパティを使用します。
TextInputコンポーネントに値がない場合にテキストを表示するには、placeholderプロパティを使用します。

ユーザー入力を追跡するには、useStateフックを使用します。