ReactNative切换TextInput软键盘闪烁问题

1,924 阅读1分钟

问题

当我在一个组件中使用多个不同keyboardType的TextInput,而我们将TextInput封装进一个公共组件进行使用时,我们在页面中切换帐号和密码输入框后,IOS软键盘会呈现闪烁问题 可以看到由于多了“密码”一栏,“完成”会位置上下变化,导致闪烁。

解决方案

思路:在输入框公共组件里面根据传入props判断是否重新渲染

shouldComponentUpdate(newProps) {
   if (
     newProps.placeholder == this.props.placeholder &&
     newProps.type == this.props.type &&
     newProps.value === this.props.value
   ) {
     return false;
   }
   return true;
 }