rn 输入框组件TextInput、按下半透明组件TouchableOpacity、按下高亮组件TouchableHighlight、按钮组件Button

以你之姓@ 2021-07-24 21:49 720阅读 0赞

输入框组件
    	<TextInput />
    		属性:
    		
    		 高度
    			height
    			
    		 背景颜色
    		 	backgroundColor
    		 	
           	  下划线的颜色，透明则为 transparent
               	underlineColorAndroid = "transparent"
               	
              占位符
              	 placeholder = "请输入邮箱"
              	 
              占位符的字体颜色
              	 placeholderTextColor = "#ccc"
              	 
              字母大写模式:'none', 'sentences句子首字母大写', 'words单词首字母大写', 'characters全大写'
              	 autoCapitalize = "none"
              	 
              键盘类型，可选的值有 "default","number-pad","decimal-pad", "numeric","email-address","phone-pad"
              	 keyboardType = "email-address"
              	 
              键盘上的确认键类型，可选的值有 "done","go","next","search","send"
               	 returnKeyType = "next"
             
              是否属于密码框类型,输入后会变成原点
               	 secureTextEntry = {true}
              
              输入多行设置
               	 multiline = {true}
               	 
              输入框的行数,即行高
                 numberOfLines = {4}
              
              输入文字的位置,值有auto、bottom、center
               	 textAlignVertical="top"
              
              如果为 true，在componentDidMount后会获得焦点。默认值为 false。
              	 autoFocus
              
              如果为 true，则隐藏光标。默认值为 false。
              	caretHidden
              	
              是否要在文本框右侧显示“清除”按钮。仅在单行模式下可用。默认值为never。ios
              	clearButtonMode	'never', 'while-editing', 'unless-editing', 'always'
              	
              如果为 true，每次开始输入的时候都会清除文本框的内容,ios
              	clearTextOnFocus
              
              指定一个图片放置在左侧。图片必须放置在/android/app/src/main/res/drawable目录下，经过编译后按如下形式引用（无路径无后缀）：
              	inlineImageLeft='图片名'
              	
              给放置在左侧的图片设置 padding 样式。
             	inlineImagePadding
             
              指定键盘的颜色。
              	keyboardAppearance	'default', 'light', 'dark'
              	
              决定弹出何种软键盘类型，譬如numeric（纯数字键盘）。
              	
    			    default
    			    number-pad
    			    decimal-pad
    			    numeric
    			    email-address
    			    phone-pad
    			
    			下面的值仅 iOS 可用：
    			
    			    ascii-capable
    			    numbers-and-punctuation
    			    url
    			    name-phone-pad
    			    twitter
    			    web-search
    			
    			下面的值仅 Android 可用：
    			
    			    visible-password
    			    
    		限制文本框中最多的字符数。
    			maxLength
    		
    		当文本框失去焦点的时候调用此回调函数
    			onBlur
    			
    		当文本框内容变化时调用此回调函数。回调参数为{ nativeEvent: { eventCount, target, text} }
    			onChange
    		
    		当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。
    			onChangeText
    		
    		当文本输入结束后调用此回调函数。
    			onEndEditing
    			
    		当文本框获得焦点的时候调用此回调函数。回调参数为{ nativeEvent: { target } }。	
    			onFocus
    			
    		当一个键被按下的时候调用此回调。传递给回调函数的参数为{ nativeEvent: { key: keyValue } }，其中keyValue即为被按下的键。会在 onChange 之前调用。注意：在 Android 上只有软键盘会触发此事件，物理键盘不会触发。
    			onKeyPress
    			
    		如果为 true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。
    			secureTextEntry
    		
    		设置选中文字的范围（指定首尾的索引值）。如果首尾为同一索引位置，则相当于指定光标的位置。
    			selection	{start: number,end: number}
    			
    		设置输入框高亮时的颜色（还包括光标）。
    			selectionColor
    		
    		如果为 true，当获得焦点的时候，所有的文字都会被选中。
    			selectTextOnFocus
    			
    		不可编辑
    			editable={false}
    		
    		设置值
    			value
    		
    
    按下半透明组件
    <TouchableOpacity>...</TouchableOpacity>
    
    按下高亮组件
    <TouchableHighlight  
    	onPress={设置onPress后才有效果}
    	underlayColor='触摸时显示出来的颜色'
    >只能有一个根节点</TouchableHighlight>
    
    按钮组件
    <Button
      onPress={onPressLearnMore}
      title="Learn More"
      color="#841584"
      disabled=false
      accessibilityLabel="Learn more about this purple button"   用于给残障人士显示的文本
    />

输入框组件更多详细属性:[点这里][Link 1]

代码示例:

import React, {  Component } from 'react'
    import {  View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
    
    class Inputs extends Component { 
       state = { 
          email: '',
          password: '',
          intro:'',
       }
       handleEmail = (text) => { 
    
          this.setState({  email: text })
       }
       handlePassword = (text) => { 
          
          this.setState({  password: text })
       }
    
       handleIntro = (text) => { 
          this.setState({  intro: text })
       }
       test=()=>{ 
           alert('测试响应');
       }
    
       register = (email, pass,intro) => { 
          alert('email: ' + email + '\npassword: ' + pass + "\nintro:" + intro)
       }
       render() { 
          return (
             <View style = { styles.container}>
                <TextInput 
                   style = { styles.input}
                  // 下划线的颜色，透明则为 transparent
                   underlineColorAndroid = "transparent"
                   //占位符
                   placeholder = "请输入邮箱"
                  // 占位符的字体颜色
                   placeholderTextColor = "#ccc"
                  // 字母大写模式:'none', 'sentences句子首字母大写', 'words单词首字母大写', 'characters全大写'
                   autoCapitalize = "none"
                  // 键盘类型，可选的值有 "default","number-pad","decimal-pad", "numeric","email-address","phone-pad"
                   keyboardType = "email-address"
                  // 键盘上的返回键类型，可选的值有 "done","go","next","search","send"
                   returnKeyType = "next"
                  // 文本变更后的回调函数，参数为输入框里的文本
                   onChangeText = { this.handleEmail}/>
    
                <TextInput 
                   style = { styles.input}
                   underlineColorAndroid = "transparent"
                   placeholder = "请输入密码"
                   placeholderTextColor = "#ccc"
                   autoCapitalize = "none"
                   //确认键类型
                   returnKeyType = "next"
                  // 是否属于密码框类型
                   secureTextEntry = { true}
                   onChangeText = { this.handlePassword}/>
    
                <TextInput 
                   style = { [styles.input,{ height:100}]}
                   underlineColorAndroid = "transparent"
                   placeholder = "请输入描述"
                   placeholderTextColor = "#ccc"
                   autoCapitalize = "none"
                  // 多行设置
                   multiline = { true}
                  // 行数
                   numberOfLines = { 4}
                   //文字的位置靠上
                   textAlignVertical="top"
                   returnKeyType="done"
                   onChangeText = { this.handleIntro}/>
                { /* 封装视图，使其可以正确响应触摸操作 */}
                <TouchableOpacity
                   style = { styles.submitButton}
                   onPress = { 
                       () => this.register(this.state.email, this.state.password,this.state.intro)
                   }
    
                   >
                   <Text style = { styles.submitButtonText}>注册</Text>
                </TouchableOpacity>
             </View>
          )
       }
    }
    export default Inputs
    
    const styles = StyleSheet.create({ 
       container: { 
          paddingTop: 23
       },
       input: { 
          margin: 15,
          paddingLeft:8,
          height: 40,
          borderColor: '#eeeeee',
          borderWidth: 1
       },
       submitButton: { 
          backgroundColor: '#7a42f4',
          padding: 10,
          alignItems:'center',
          margin: 15,
          height: 40,
       },
       submitButtonText:{ 
          color: 'white'
       }
    })

[Link 1]: https://www.jianshu.com/p/2f702b52b321