diff --git a/index.js b/index.js index abc948ced89611d641e1cb59b8a033c35ec4255d..a5c906f0b6086a99e68d8fc75322453d12b3071d 100644 --- a/index.js +++ b/index.js @@ -6,7 +6,8 @@ import { TextInput, findNodeHandle, AppRegistry, - AccessibilityInfo + AccessibilityInfo, + Platform } from 'react-native'; import PropTypes from 'prop-types' @@ -62,6 +63,7 @@ export class CustomTextInput extends Component { constructor () { super() this._isA11yEnable = false; + this._installCustomInput = this._installCustomInput.bind(this) AccessibilityInfo.addEventListener('change', this._changeListener) AccessibilityInfo.fetch().then((isEnable) => { this._isA11yEnable = isEnable; @@ -72,22 +74,10 @@ export class CustomTextInput extends Component { this._isA11yEnable = isEnable; } componentDidMount() { - // 这里要加延时是为了解决 iOS 在 iOS16.5 以上经常拉起系统键盘,没有出现自定义键盘的问题 - this._timer = setTimeout(() => { - install( - findNodeHandle(this.input), - this.props.customKeyboardType, - this.props.maxLength === undefined ? 1024 : this.props.maxLength, - getKeyboardHeightByType(this.props.customKeyboardType) - ); - }, 5) + this._installCustomInput() } componentWillUnmount () { - if (this._timer) { - clearTimeout(this._timer) - this._timer = null - } AccessibilityInfo.removeEventListener('change', this._changeListener) } @@ -101,6 +91,34 @@ export class CustomTextInput extends Component { ); } } + + _installCustomInput () { + if (Platform.OS === 'ios') { + // 为了解决 iOS 还未完成 AppRegistry.registerComponent 就调用了 install 方法,造成展示了系统键盘的问题,需要给 install 加个延时 + // 为了避免系统键盘闪现,刚开始不设置 autoFocus,延时设置 + setTimeout(() => { + install( + findNodeHandle(this.input), + this.props.customKeyboardType, + this.props.maxLength === undefined ? 1024 : this.props.maxLength, + getKeyboardHeightByType(this.props.customKeyboardType) + ); + const { autoFocus } = this.props + if (autoFocus && this.input) { + let number = findNodeHandle(this.input); + TextInput.State.focusTextInput(number); + } + }, 10) + } else { + install( + findNodeHandle(this.input), + this.props.customKeyboardType, + this.props.maxLength === undefined ? 1024 : this.props.maxLength, + getKeyboardHeightByType(this.props.customKeyboardType) + ); + } + } + onRef = ref => { if (ref) { this.input = ref; @@ -163,8 +181,8 @@ export class CustomTextInput extends Component { render() { - const { customKeyboardType, ...others } = this.props; - return ; + const { customKeyboardType, autoFocus, ...others } = this.props; + return ; } }