react native TextInput
发布在react native2015年12月10日view:4011react-native
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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

属性名/方法react nativePC
autoCorrect 自动纠错PC
autoFocus 自动聚焦IE10+
editable 相当于readyOnly readyOnly
keyboardType 用于弹出一个输入法的面板
maxLength 与PC一致辞存在
multiline 用它实现textareatextarea
password 用它实现passwordpassword
onChangeText 有点类似PC的onInput事件,但传入的是value值,
而不是事件对象
onInput
onChange onChangeonChange
onBlur obBluronBlur
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

评论
发表评论
1年前

这是的flex-direction改成row就无法显示TextInput了

WRITTEN BY
司徒正美
穿梭于二次元与二进制间的魔法师( ̄(工) ̄) 凸ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้
TA的新浪微博
PUBLISHED IN
react native

用于放置react native的相关文章

我的收藏