React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/**
  * Sample React Native App
  * https://github.com/facebook/react-native
  * 周少停 2016-09-16
  * TextInput 常用属性
  */
 
import  React, { Component } from  'react' ;
import  {
   AppRegistry,
   StyleSheet,
   TextInput,
   View
} from  'react-native' ;
 
class  Project  extends  Component {
   render() {
     return  (
       <View style={styles.container}>
        <TextInput style={styles.inputStyle}
          //value={'我是默认的'}     /*该文字无法删除*/
          keyboardType = { 'number-pad' //弹出键盘类型
          multiline = { true }    //多行显示,默认false:单行显示
//          password = {true}     //密码 多行文本不显示密码
          placeholder = { '我是占位文字' }   //占位文字
          placeholderTextColor =  'red'   //占位文字颜色
          autoCapitalize = { 'characters' //通知文本输入自动利用某些字符
          clearButtonMode = { 'always' }     //右侧的清除模式
          autoCorrect = { false //禁用自动校正 默认值true开启自动校正
         // editable = {false} // 是否可编辑 默认为true可编辑
         // retrunKeyType = {'go'} //返回键类型
          />
       </View>
     );
   }
}
 
const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor:  '#F5FCFF' ,
   },
   inputStyle:{
     height:60,
     marginTop:20,
     borderWidth:1,
     borderColor: 'black'
   }
});
 
AppRegistry.registerComponent( 'Project' , () => Project);

  完整源码下载:https://github.com/pheromone/React-Native-1