react native TextInput - react native

这个组件相当于PC端的input[type=’text’]，

属性名/方法	react native	PC
autoCorrect	自动纠错	PC
autoFocus	自动聚焦	IE10+
editable	相当于readyOnly	readyOnly
keyboardType	用于弹出一个输入法的面板
maxLength	与PC一致辞	存在
multiline	用它实现textarea	textarea
password	用它实现password	password
onChangeText	有点类似PC的onInput事件，但传入的是value值, 而不是事件对象	onInput
onChange	onChange	onChange
onBlur	obBlur	onBlur
clearButtonMode	IOS独有	IE10＋

parent{
  flex:1;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}
textinput{
  borderWidth:1;
  margin-top: 10;
  borderColor:gray;
  height: 40;
}
text{
  font-size: 16;
  color:#660099;
}

主程序如下


/**
 * 表单元素 司徒正美
 */
'use strict';


var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
  AppRegistry,
  TextInput,
} = React;
var styles = require("./style")

var Input = React.createClass({
  getInitialState: function() {
    return {
      value: 0,
      text: "",
      type: false
    };
  },

  render: function() {
    return (
      <View style={styles.parent}>

        <TextInput
          style={styles.textinput}
          clearButtonMode={'always'}
          placeholder={'placehoder'}
          placeholderTextColor={'#bfc5ee'}
          onChangeText={(val) => this.setState({text:val})}
          onBlur={()=> this.setState({type:'blur'}) }
          onChange={()=> this.setState({type:'change'}) }
          onFocus={()=> this.setState({type:'focus'}) }
          value={this.state.text}
        />
        <TextInput
           style={styles.textinput}
           value={'用于失去焦点'}
        />
        <Text style={styles.text}>text:{this.state.text}{'\n'}</Text>
        <Text style={styles.text}>EventType:{String(this.state.type)}</Text>
      </View>
    )
  },

});


AppRegistry.registerComponent('AwesomeProject', () => Input);

enter image description here