TextInput 二三事

Author Avatar
XibHe 1月 04, 2019
  • 在其它设备中阅读本文章

记录下这两天使用 TextInput 时遇到的问题及一些注意事项。

TextInput 键盘遮挡视图

  1. KeyboardAvoidingView
import { KeyboardAvoidingView, ScrollView } from 'react-native';

<View style={[styles.container]}>
  <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
    <ScrollView
        style={[styles.scrollViewStyle]}
        keyboardShouldPersistTaps="handled"
    >
    // 视图布局
   </ScrollView>
  </KeyboardAvoidingView>
</View>

这里单纯的添加 KeyboardAvoidingView 只会移动 TextInput 的坐标,但输入框下面还有其他视图,为了不遮挡其他视图,在将整个布局放到
ScrollView 中。

  1. react-native-keyboard-aware-scroll-view

TextInput 中一些需要注意的属性

  1. 某些属性 iOS 与 Android 的取值或展示样式的差异

    TextInput 在安卓上默认有一个底边框,同时会有一些 padding。如果要想使其看起来和iOS上尽量一致,则需要设置padding: 0,同时设置

    underlineColorAndroid="transparent"
    

    来去掉底边框。

  2. keyboardShouldPersistTaps 操作键盘

    如果当前界面有软键盘,那么点击 scrollview 后是否收起键盘,取决于本属性的设置。(注意:很多人反应 TextInput 无法自动失去焦点/需要点击多次切换到其他组件等等问题,其关键都是需要将 TextInput 放到ScrollView中再设置本属性)

  3. keyboardType 的不同取值,iOS 和 Android 不同之处

无法通过在 TextInput 标签中定义 ref 调用 clear( )

通过 refTextInput 标签中定义不同的引用类型,然后发现无法根据 定义的 ref 调用 TextInputclear( ) 方法。

react-native info 为:

Environment:
  OS: macOS High Sierra 10.13.6
  Node: 8.6.0
  Yarn: 1.12.3
  npm: 5.3.0
  Watchman: 4.9.0
  Xcode: Xcode 10.1 Build version 10B61
  Android Studio: 3.2 AI-181.5540.7.32.5014246

Packages: (wanted => installed)
  react: 16.3.1
  react-native: 0.55.3

代码如下:

 export class LoginSceneComponent extends Component {
  constructor(props) {
      super(props)
      this.codeTextInputRef = React.createRef()
  }

  changeLoginType = () => {
   this.codeTextInputRef.current.clear()
  }

  render () {
    return (
       <ScrollView
        style={[styles.scrollViewStyle]}
        keyboardShouldPersistTaps="handled"
       >
          <TextInput
            ref={this.codeTextInputRef}
            style={[styles.inputStyle]}
            secureTextEntry={this.state.loginTypeFlag}
            value={this.state.passWord}
            onChangeText={text => this.setState({ passWord: text })}
           />
       </ScrollView>
    )  
  }
 }

最终通过在

onChangeText={txt => this.setState({ passWord: txt })}

方法中重新 setState 参数清除了输入框中内容。

注意: React 16.3 更新了 创建 Ref 的方法。

参考资料

textinput

keyboardavoidingview

facebook/react-native/issues/18843

facebook/react-native/issues/18272

refs-and-the-dom

–EOF–

若无特别说明,本站文章均为原创,转载请保留链接,谢谢!