1 Star 1 Fork 3

张翔/react-native-yusha-customKeyboard

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
CustomKeyBoardView.js 5.83 KB
一键复制 编辑 原始数据 按行查看 历史
张翔 提交于 2018-09-14 10:38 . 修改键盘top背景色
//@flow
import React, { Component } from 'react';
import PropTypes from 'prop-types'
import {
TouchableOpacity,
Text,
Image,
View,
StyleSheet,
findNodeHandle,
DeviceInfo,
} from 'react-native';
//提示
import {KeyTip} from './views'
import * as CustomKeyboard from './customKeyboard'
export default class KeyBoard extends Component{
state: Object
backSpaceRequest: number
insertTextRequest: number
clearFocusRequest: number
clearAllRequest: number
static propTypes = {
insertText: PropTypes.func.isRequired,
clearFocus: PropTypes.func.isRequired,
onConfirm: PropTypes.func,
clearAll: PropTypes.func.isRequired,
KeyBoardView: PropTypes.any.isRequired,
}
constructor() {
super(...arguments)
this.state = {
width: 0,
showTip: {isShow:false, layout:{x:0,y:0,width:0,height:0}, keyValue:""}
}
}
_handleDelete = () => {
this.backSpaceRequest && cancelAnimationFrame(this.backSpaceRequest)
this.backSpaceRequest = requestAnimationFrame(() => {
this.props.backSpace(this.props.tag);
})
};
_handleKeyPress = (key) => {
this.insertTextRequest && cancelAnimationFrame(this.insertTextRequest)
this.insertTextRequest = requestAnimationFrame(() => {
this.props.insertText(this.props.tag, key);
})
}
_clearFocus = () => {
this.clearFocusRequest && cancelAnimationFrame(this.clearFocusRequest)
this.clearFocusRequest = requestAnimationFrame(() => {
this.props.clearFocus(this.props.tag)
this.props && this.props.onConfirm()
})
}
_handlerClearAll = () => {
this.clearAllRequest && cancelAnimationFrame(this.clearAllRequest)
this.clearAllRequest = requestAnimationFrame(() => {
this.props.clearAll(this.props.tag)
})
}
//{isShow, ref, keyValue}
_showTip = (showTipData) => {
if(showTipData.isShow) {
showTipData.ref.measureLayout(findNodeHandle(this.refs.keyboard), (left, top, width, height) => {
console.log(`key: ${showTipData.keyValue} left:${left} top:${top} width:${width} height:${height}`)
//{isShow:false, layout:{x:0,y:0,width:0,height:0}, keyValue:""}
this.setState({...this.state, showTip:{...showTipData, layout:{x:left, y:top, width, height}}})
})
} else {
this.setState({...this.state, showTip:showTipData})
}
}
_onLayout = ({ nativeEvent }) => {
const width = nativeEvent.layout.width
let height = nativeEvent.layout.height
if (width > 0 && width !== this.state.width) {
this.setState({ ...this.state, width })
}
}
_renderTip = () => {
const {isShow, layout, keyValue} = this.state.showTip
return isShow ?
(
<KeyTip
layout = {layout}
keyValue = {keyValue}
/>
)
:
null
}
componentWillUnmount() {
this.clearFocusRequest && cancelAnimationFrame(this.clearFocusRequest)
this.insertTextRequest && cancelAnimationFrame(this.insertTextRequest)
this.backSpaceRequest && cancelAnimationFrame(this.backSpaceRequest)
this.clearAllRequest && cancelAnimationFrame(this.clearAllRequest)
}
render() {
const {KeyBoardView} = this.props
return (
<View onLayout={this._onLayout} style={styles.container} ref="keyboard" pointerEvents="box-none">
<View style={styles.keyBoard} key="keyboard">
{
!KeyBoardView.customKeyboardTop ? (
<View style={styles.top}>
<View style={styles.topLeft}>
{
KeyBoardView.getKeyBoardIcon && KeyBoardView.getKeyBoardIcon()
}
<Text style={styles.topDesText}>{KeyBoardView.getKeyBoardName && KeyBoardView.getKeyBoardName()}</Text>
</View>
<TouchableOpacity onPress={this._clearFocus}>
<Text style={styles.topCompleteText}>完成</Text>
</TouchableOpacity>
</View>
) : (<View style={styles.topSpace}></View>)
}
<KeyBoardView
{...this.props}
onKeyPress={this._handleKeyPress}
onDelete={this._handleDelete}
onClearAll={this._handlerClearAll}
showTip={this._showTip}
/>
</View>
{this._renderTip()}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'flex-end',
},
keyBoard: {
backgroundColor: '#f6f5f2',
height: DeviceInfo.isIPhoneX_deprecated ? 286 : 252
},
top: {
height: 36,
borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: '#fff',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#fff'
},
topSpace: {
height: 36,
backgroundColor: '#f1f2f4'
},
topLeft: {
paddingLeft: 15,
flexDirection: 'row',
},
topDesText: {
color: '#666',
fontSize: 18,
paddingHorizontal: 8,
},
topCompleteText: {
color: '#eb3136',
fontSize: 18,
paddingHorizontal: 15,
paddingVertical: 10,
}
})
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/faithmin/react-native-yusha-customKeyboard.git
git@gitee.com:faithmin/react-native-yusha-customKeyboard.git
faithmin
react-native-yusha-customKeyboard
react-native-yusha-customKeyboard
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385