React Native 文本输入基础知识

在 React Native 中提供了一个文本输入组件TextInput。此组件主要是监听键盘输入事件，并把对应的输入值显示在组件中，此组件还提供了很多功能配置参数，例如自动更正、自动大写、占位符文本和不同的键盘类型（例如数字键盘）。

我们首先来编写一个简单的实例，使用onChangeText事件监听用户的输入：

export default function InputText() {const [name, setName] = useState<string>("");const [age, setAge] = useState<string>("");return (<View style={styles.container}><Text style={styles.mainTitle}>InputText 组件实例</Text><View style={styles.formItem}><Text style={styles.labelTitle}>姓名：</Text><TextInputstyle={styles.formInput}placeholder="请输入姓名"value={name}onChangeText={(value) => setName(value)}></TextInput></View><View style={styles.formItem}><Text style={styles.labelTitle}>年龄：</Text><TextInputstyle={styles.formInput}keyboardType="numeric"placeholder="请输入年龄"value={age}onChangeText={(value) => setAge(value)}></TextInput></View><View style={styles.infoContainer}><Text>姓名：{name}</Text><Text>年龄：{age}</Text></View></View>);
}const styles = StyleSheet.create({container: {margin: 8,},mainTitle: {fontSize: 22,fontWeight: "bold",padding: 10,borderBottomWidth: 1,borderColor: "#e3e3e3",},input: {borderWidth: 1,borderRadius: 4,borderColor: "#e3e3e3",marginVertical: 8,padding: 8,},formItem: {flexDirection: "row",justifyContent: "flex-start",alignItems: "center",rowGap: 8,columnGap: 8,marginVertical: 12,},labelTitle: {fontSize: 16,},formInput: {borderWidth: 1,borderRadius: 6,paddingHorizontal: 10,paddingVertical: 6,flex: 1,},infoContainer: {flexDirection: "row",marginVertical: 8,justifyContent: "center",alignItems: "center",rowGap: 8,columnGap: 8,},
});

TextInput组件除了可以监听onChangeText事件外，还可以监听.focus()和.blur()事件。并且此组件还可以通过设置multiline属性来允许用户输入多行文本数据，例如我们可以允许用户最多输入 4 行文本，字数最大 100 个字符：

<View style={styles.formItem}><Text style={styles.labelTitle}>备注：</Text><TextInputstyle={styles.formInput}multilinenumberOfLines={4}maxLength={100}placeholder="请输入备注"value={summary}></TextInput>
</View>

默认情况下，TextInput 在其视图底部有一个边框。该边框的内边距由系统提供的背景图像设置，并且无法更改。避免这种情况的解决方案是要么不显式设置高度，在这种情况下系统将负责在正确的位置显示边框，要么通过将 underlineColorAndroid 设置为透明来不显示边框。underlineColorAndroid此属性只是针对于安卓设备而言。

请注意，在 Android 上，在输入中执行文本选择可以将应用程序的活动 windowSoftInputMode 参数更改为 adjustmentResize。当键盘处于活动状态时，这可能会导致具有“绝对”位置的组件出现问题。要避免此行为，请在 AndroidManifest.xml 中指定 windowSoftInputMode 或使用本机代码以编程方式控制此参数。