$ npm install react-native-custom-keyboard --save
$ react-native link react-native-custom-keyboard
Libraries
➜ Add Files to [your project's name]
node_modules
➜ react-native-custom-keyboard
and add RNCustomKeyboard.xcodeproj
libRNCustomKeyboard.a
to your project's Build Phases
➜ Link Binary With Libraries
Cmd+R
)<android/app/src/main/java/[...]/MainActivity.java
import cn.reactnative.customkeyboard.RNCustomKeyboardPackage;
to the imports at the top of the filenew RNCustomKeyboardPackage()
to the list returned by the getPackages()
methodandroid/settings.gradle
:
include ':react-native-custom-keyboard'
project(':react-native-custom-keyboard').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-custom-keyboard/android')
android/app/build.gradle
:
compile project(':react-native-custom-keyboard')
Register a component as custom keyboard:
import React, { Component } from 'react';
import {
TouchableOpacity,
Text,
View,
} from 'react-native';
import { register, insertText } from 'react-native-custom-keyboard';
class MyKeyboard extends Component {
onPress = () => {
insertText(this.props.tag, 'Hello, world');
};
render() {
return (
<View>
<TouchableOpacity onPress={this.onPress}>
<Text>Hello, world</Text>
</TouchableOpacity>
</View>
);
}
}
register('hello', () => MyKeyboard);
Use CustomTextInput
instead of TextInput
.
import React, { Component } from 'react';
import {CustomTextInput} from 'react-native-custom-keyboard';
class MyPage extends Component {
state = {
value: '';
};
onChangeText = text => {
this.setState({value: text});
};
render() {
return (
<View>
<CustomTextInput customKeyboardType="hello" value={this.state.value} onChangeText={this.onChangeText} />
</View>
);
}
}
Register a custom keyboard type.
Install custom keyboard to a TextInput
.
Generally you can use CustomTextInput instead of this. But you can use this API to install/change custom keyboard dynamically.
Uninstall custom keyboard from a TextInput
dynamically.
Use in a custom keyboard, insert text to TextInput
.
Use in a custom keyboard, delete selected text or the charactor before cursor.
Use in a custom keyboard, delete selected text or the charactor after cursor.
Use in a custom keyboard, move cursor to selection start or move cursor left.
Use in a custom keyboard, move cursor to selection end or move cursor right.
Use in a custom keyboard. Switch to system keyboard.
Next time user press or focus on the TextInput
, custom keyboard will
appear again. To keep using system keyboard, call uninstall
instead.
Use instead of TextInput
, this component support all properties of TextInput
.
Use a registered custom keyboard.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。