如何在不使用第三方库的情况下打开React Native表情键盘?
React Native 无需第三方库唤起表情键盘的实现方法
React Native 原生的 TextInput 组件本身就支持唤起系统表情键盘,完全不用依赖第三方库,只需根据 iOS 和 Android 平台的差异调整对应属性即可:
- iOS 端:直接将
keyboardType设为'emoji',就能直接唤起系统原生的表情键盘 - Android 端:设置
inputType='textShortMessage',配合默认的keyboardType='default',系统键盘会自动显示表情切换按钮(部分厂商ROM可能需要用户手动切换,但这是原生系统的默认行为)
调整后的完整代码:
import { TextInput, Platform } from 'react-native'; <TextInput onChangeText={e => handleChange("message", e)} keyboardType={Platform.OS === 'ios' ? 'emoji' : 'default'} inputType={Platform.OS === 'android' ? 'textShortMessage' : undefined} />
补充说明:如果需要页面加载时自动弹出表情键盘,可以给 TextInput 加上 autoFocus={true} 属性,具体根据业务需求调整。Android 上的表情切换逻辑由系统控制,不同品牌手机可能表现略有差异,但都是原生支持的功能。
内容的提问来源于stack exchange,提问作者Hamza Ilyas
相关产品推荐
相关产品推荐

