在 React Native 中，当用户与文本输入组件（如 TextInput）交互时，系统可能会自动显示键盘。React Native本身并没有直接提供一个“调用键盘”的API，因为键盘的显示和隐藏主要是由系统根据用户的交互行为来管理的。但是，你可以通过一些方法影响键盘的行为，比如设置 TextInput的属性来控制键盘的类型，或者在用户完成输入后手动隐藏键盘。
原理
- 系统触发：当用户点击或聚焦到 TextInput 组件时，系统会根据 TextInput 的属性（如 keyboardType）来决定显示哪种类型的键盘。
- 属性设置：通过设置 TextInput 的不同属性（如 autoFocus、keyboardType、multiline 等），你可以控制键盘的显示方式。
- 手动控制：虽然 React Native 没有直接提供“调用”键盘的 API，但你可以通过一些间接的方法来控制键盘的显示和隐藏，比如使用 Keyboard 模块（来自 react-native 库）来监听键盘事件或手动隐藏键盘。
1. 使用 TextInput 和 keyboardType
import React, { useState } from 'react';
import { TextInput, View, StyleSheet } from 'react-native'; const App = () => { const [text, setText] = useState(''); return ( <View style={styles.container}> <TextInput style={styles.input} placeholder="输入文本" keyboardType="numeric" // 设置键盘类型为数字键盘 onChangeText={text => setText(text)} value={text} /> </View> );
}; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, input: { height: 40, borderColor: 'gray', borderWidth: 1, padding: 10, marginVertical: 10, },
}); export default App;
2. 手动隐藏键盘
import React, { useState, useEffect } from 'react';
import { TextInput, View, StyleSheet, Button, Keyboard } from 'react-native'; const App = () => { const [text, setText] = useState(''); useEffect(() => { const dismissKeyboard = () => { Keyboard.dismiss(); // 手动隐藏键盘 }; // 当组件卸载时移除监听器 return () => { // 清除你的代码，如移除监听器等 }; }, []); return ( <View style={styles.container}> <TextInput style={styles.input} placeholder="输入文本" onChangeText={text => setText(text)} value={text} /> <Button title="隐藏键盘" onPress={dismissKeyboard} /> </View> );
}; // ... (其他代码保持不变) export default App;
Keyboard模块可以监听原生键盘事件以做出相应回应，比如收回键盘。
import React, {useState, useEffect} from 'react';
import {Keyboard, Text, TextInput, StyleSheet, View} from 'react-native';const Example = () => {const [keyboardStatus, setKeyboardStatus] = useState('');useEffect(() => {const showSubscription = Keyboard.addListener('keyboardDidShow', () => {setKeyboardStatus('Keyboard Shown');});const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {setKeyboardStatus('Keyboard Hidden');});return () => {showSubscription.remove();hideSubscription.remove();};}, []);return (<View style={style.container}><TextInputstyle={style.input}placeholder="Click here…"onSubmitEditing={Keyboard.dismiss}/><Text style={style.status}>{keyboardStatus}</Text></View>);
};const style = StyleSheet.create({container: {flex: 1,padding: 36,},input: {padding: 10,borderWidth: 0.5,borderRadius: 4,},status: {padding: 10,textAlign: 'center',},
});export default Example;
)
)
