ReactNative实现登录页面

效果图

](http://upload-images.jianshu.io/upload_images/1669928-6f235ac1a12905f0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

代码与逻辑实现

import React,{Component} from 'react'
import {
    View,
    AlertIOS,
    TouchableHighlight,
    Button,
    ActivityIndicator,
    StyleSheet,
    Alert,
    Text,
    Image,
    AppRegistry,
    TextInput,
    Dimensions,
    dismissKeyboard,
    TouchableWithoutFeedback,
    TouchableNativeFeedback,
    TouchableOpacity,
    Switch
} from 'react-native'
export default class TestDemo extends Component {

constructor(props) {
      super(props)
      this.state = {
        text: '',
        psw:'',
        value:true
      }
    }

getValue(){
    this.setState(
    {
        value:!this.state.value
    }
)


}
  render() {
    return (

      

        
           登录 
        

         this.setState({text})}
        />

         this.setState({psw})}
        />

        
           输出用户名 
        

        
        输出密码
        
      
    
    );
  }

btnClick (){
  alert(this.state.text)
}

pswClick (){
  alert(this.state.psw)
}


}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  txtCenter: {
    fontSize: 17,
  },

  button:{
    backgroundColor:'red'
  },
});