react native自定义键盘
react native自定义键盘
iOS,Android双平台使用,适配iPhoneX,博文地址:https://www.jianshu.com/p/6b6879323069
0.50~0.52: 0.0.7
0.53及之后版:0.1.2
yarn add react-native-yusha-customkeyboard
react-native link react-native-yusha-customkeyboard
react-native link react-native-svg
import * as CustomKeyboard from 'react-native-yusha-customkeyboard'
//注册没有小数点的数字键盘
CustomKeyboard.keyBoardAPI('numberKeyBoard')(class extends Component{
static getKeyBoardIcon = () => {
return <Image source={require('./images/anquanbaohu.png')}/>
}
static getKeyBoardName = () => {
return "安全键盘"
}
render() {
return (
<CustomKeyboard.NumberKeyBoardView
keyboardType={"number-pad"}
disableOtherText={true}
disableDot={true}
{...this.props}
/>
)
}
})
//注册有小数点的数字键盘
CustomKeyboard.keyBoardAPI('numberKeyBoardWithDot')(class extends Component{
render() {
return (
<CustomKeyboard.NumberKeyBoardView
keyboardType={"number-pad"}
disableOtherText={true}
{...this.props}
/>
)
}
})
//注册数字,字母,符号切换键盘
CustomKeyboard.keyBoardAPI('safeKeyBoard')(CustomKeyboard.SafeKeyBoardView)
//注册自定义视图键盘
CustomKeyboard.keyBoardAPI('testKeyboard')(class extends Component{
static customKeyboardTop = true
render() {
return <View style={{flex:1, backgroundColor: 'red'}}/>
}
})
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
} from 'react-native';
import * as CustomKeyboard from 'react-native-yusha-customkeyboard'
export default class App extends Component<{}> {
render() {
return (
<CustomKeyboard.AwareCusKeyBoardScrollView style={{flex: 1}}>
<CustomKeyboard.CustomTextInput
customKeyboardType="numberKeyBoard"
placeholder="numberKeyBoard"
/>
<CustomKeyboard.CustomTextInput
customKeyboardType="numberKeyBoardWithDot"
placeholder="numberKeyBoardWithDot"
/>
<CustomKeyboard.CustomTextInput
customKeyboardType="safeKeyBoard"
placeholder="safeKeyBoard"
/>
<CustomKeyboard.CustomTextInput
customKeyboardType="testKeyboard"
placeholder="testKeyboard"
/>
</CustomKeyboard.AwareCusKeyBoardScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
height: 700,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});