从零学React Native之11 TextInput

TextInput 组件是用来通过键盘输入文字，可以使用View组件和Text组件样式，没有自己特定的样式。
与Text组件类似，TextInput组件内部的元素不再使用FlexBox布局，而采用文本布局。详情见上一篇文章从零学React Native之10Text

TextInput属性

只列出了一些常用的，详情见官网

0.34版本, Android端添加了controlled selection属性
详情:
Add TextInput controlled selection prop on Android (3c1b69c) - @janicduplessis

下面的例子

class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render() {
    return (
       this.setState({text})}
        value={this.state.text}
      />
    );
  }
}

// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

ios运行结果

Android运行结果

两个平台不同表现

对比发现 Android端 borderWidth是不生效的，默认有一个输入的线，符合Android设计，Android字体默认很小，我们把上面样式中的height换成fontSize，来看下

  this.setState({text})}
      value={this.state.text}
/>

可以看到Android端字体变大了，但是IOS端没有了

左面是IOS右面Android

IOS平台上，没有指定height，TextInput组件不会显示。
一般情况下，我们需要指定FontSize和height，当上下padding为0的时候，height至少是FontSize的1.1倍时Android端才能保证字体完全显示。而默认Android端是有padding的。
如下面的代码可以基本适配两个平台：

render() {
    return (
        this.setState({text})}
            value={this.state.text}
          />
        );
    }```
##TextInput组件的生命周期和回调方法
1. 当用户点击输入框时，onFocus调用，获取焦点
2. 当用户输入的时候onChangeText和onChange回调，一般使用onChangeText，里面参数为输入的文本
3. 当用户按下提交键，onSubmitEditing回调，多行没有提交键
4. 当组件失去焦点，onEndEditing或onBlur调用，一般情况用onEndEditing就足够了

注意：当点击点击另一个TextInput组件时会触发失去焦点事件，**在单行的输入框中按下提交键，Android端不触发失去焦点事件。**

最方便的操作就在onChangeText事件中时刻获取用户输入的内容


更多精彩请关注微信公众账号likeDev
![likeDev.jpg](http://upload-images.jianshu.io/upload_images/1132780-8055315c103d2753.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

从零学React Native之11 TextInput

TextInput属性

两个平台不同表现

你可能感兴趣的:(从零学React Native之11 TextInput)