主页 » React Native 教程 » React Native TextInput

React Native TextInput

摘要：在本教程中，您将学习如何使用 React Native TextInput 组件为您的应用程序创建文本输入。

React Native TextInput 组件简介

TextInput 组件允许您创建文本输入字段。以下是使用 TextInput 组件的步骤

首先，从 react-native 库导入 TextInput 组件

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

其次，将 TextInput 添加到 React Native 组件中

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)

第三，在 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 上的键盘类型列表.

例如，以下显示了具有各种键盘类型的 TextInput 组件

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)

安全输入

要隐藏敏感文本（如密码），请将 secureTextEntry 属性设置为 true。例如

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)

输出

多行输入

要让用户输入多行，请将 multiline 属性设置为 true。您还可以使用 numberOfLines 属性指定 TextInput 的行数

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)

输出

自动更正

默认情况下，TextInput 组件启用了自动更正。在某些情况下，例如用户名字段，您可能希望通过将 autoCorrect 属性设置为 false 来禁用它。例如

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

自动大写

要指示 TextInput 自动将输入文本大写，可以将 autoCapitalize 属性设置为以下值之一

autoCapitalize描述
characters将所有字符大写
words将每个单词的首字母大写
sentences将每个句子的首字母大写。这是默认值。
none不要将任何字符大写。

例如，以下显示了如何定义一个 autoCapitalize 属性设置为“none”的 TextInput

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)

输出

自动完成

当您为 TextInput 指定自动完成提示时，平台（即 Android 或 iOS）将提供自动填充。

要设置提示，请使用 autoComplete 属性 加上特定值。要禁用自动完成，请将其值设置为 off。

例如，以下将 autocomplete 设置为 email

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

总结

  • 使用 TextInput 组件为您的应用程序创建文本输入。
  • 使用 style 属性向 TextInput 组件添加样式。
  • 使用 placeholder 属性在 TextInput 组件没有值时显示文本。
  • 使用 useState 钩子跟踪用户输入。
本教程对您有帮助吗？
React Native SectionList
先前
React Native SectionList
下一个
React Native KeyboardAvoidingView
React Native KeyboardAvoidingView