A text input component is provided in React Native TextInput. This component mainly monitors keyboard input events and displays the corresponding input values in the component. This component also provides many functional configuration parameters, such as auto-correction, auto-capitalization, placeholder text and different keyboard types (such as numeric keyboard ).
Let's first write a simple example and use onChangeTextevents to monitor user input:
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>
<TextInput
style={
styles.formInput}
placeholder="请输入姓名"
value={
name}
onChangeText={
(value) => setName(value)}
></TextInput>
</View>
<View style={
styles.formItem}>
<Text style={
styles.labelTitle}>年龄：</Text>
<TextInput
style={
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,
},
});
TextInputIn addition to listening to events, components onChangeTextcan also listen to .focus()and .blur()events. And this component can also multilineallow users to input multiple lines of text data by setting properties. For example, we can allow users to input up to 4 lines of text with a maximum word count of 100 characters:
<View style={
styles.formItem}>
<Text style={
styles.labelTitle}>备注：</Text>
<TextInput
style={
styles.formInput}
multiline
numberOfLines={
4}
maxLength={
100}
placeholder="请输入备注"
value={
summary}
></TextInput>
</View>
By default, a TextInput has a border at the bottom of its view. The border's padding is set by the system-provided background image and cannot be changed. The solution to avoid this is to either not set the height explicitly, in which case the system will take care of showing the border at the correct location, or not show the border by setting underlineColorAndroid to transparent. underlineColorAndroidThis property is only for Android devices.
Note that on Android, performing a text selection in the input changes the application's active windowSoftInputMode parameter to adjustmentResize. This may cause issues with components with "absolute" positions when the keyboard is active. To avoid this behavior, specify windowSoftInputMode in AndroidManifest.xml or use native code to control this parameter programmatically.