react-native TextInput键盘类型

在使用 react-native TextInput 限制键盘类型 keyboard： decimal-pad 时，
发现在部分手机(LG)时显示的是整数键盘，不能输入小数点

最后发现跟TextInput的样式有关。

1
2
3
4
5
6
7
8
9
10
textInput: {
    position: 'absolute',
    bottom: INPUTBOTTOM,
    left: 0,
    color: '#555555',
    fontSize: 16,
    height: LABEL_HEIGHT,
    backgroundColor: 'transparent',
    padding: 1, //兼容安卓
},

采用了绝对布局，并设置了居左、居下的距离

发现有两种修改方案：

  • 去掉left & backgroundColor样式，即可，默认居左,left 0其实无意义
  • 去掉 backgroundColor & padding，但是此时input会缩小

为深究此问题查看源码，

  • TextInput对应的原生组件： AndroidTextInput
  • 相关的类：com.facebook.react.views.textinput.ReactTextInputManager