rn 输入框组件、按下半透明组件、按下高亮组件

输入框组件
	<TextInput />
		属性:
       	  下划线的颜色，透明则为 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"

按下半透明组件
<TouchableOpacity>...</TouchableOpacity>

按下高亮组件
<TouchableHighlight  onPress={设置onPress后才有效果}>只能有一个根节点</TouchableHighlight>

输入框组件更多详细属性:点这里

代码示例:

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'
   }
})