⌨️

ReactNative TextInput

2024/03/20に公開

React Native

TypeScript

tech

📕Overview

https://reactnative.dev/docs/textinput
キーボードを介してアプリにテキストを入力するための基本コンポーネント。 Props は、自動修正、自動大文字化、プレースホルダーテキスト、テンキーなどのさまざまなキーボードタイプなど、いくつかの機能を構成できるようにします。

最も基本的な使用例は、TextInput をドロップダウンし、onChangeText イベントをサブスクライブしてユーザー入力を読み取ることです。 onSubmitEditing や onFocus など、サブスクライブできる他のイベントもあります。最小限の例:

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

const TextInputExample = () => {
  const [text, onChangeText] = React.useState('Useless Text');
  const [number, onChangeNumber] = React.useState('');

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default TextInputExample;

🧷summary

公式のだと、入力するだけなので入力した値をuseStateが保持しているので、View側に表示するのをやってみましょう。

TextInputExampleというコンポーネントを作成する。

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

const TextInputExample = () => {
  const [text, onChangeText] = React.useState('');

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.view}>
        <Text>{text}</Text>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          value={text}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  view: {
    marginTop: 20,
  },
  input: {
    width: 200,
    height: 40,
    margin: 12,
    borderWidth: 1,
    borderRadius: 10,
    padding: 10,
  },
});

export default TextInputExample;

App.tsxでimportしてビルドする

import TextInputExample from "./components/InputExample"

export default function App() {
  return (
    <TextInputExample />
  );
}

入力した値がView側に表示されました!、Reactのチュートリアルでよく見る使い方の例ですね。

🧑‍🎓thoughts

ReactNativeで、入力フォームを作る場合は、TextInputというコンポーネントを使います。そのままだと、角がカクカクの入力フォームになってしまうので、StyleSheetを使って、横幅や高さを設定しました。

📕Overview

🧷summary

🧑‍🎓thoughts

Discussion