React Native’de Register Ekranı Oluşturmak

import React, {Component} from 'react'
import {TouchableOpacity, View, Text,TextInput,Button,StyleSheet} from 'react-native'

class Register extends Component{

    constructor(){
        super();
        this.state={
            credentials:{
                login:"",
                password:""
            }
        }

    }

    updateText(text,field){
        let newCredentials=Object.assign(this.state.credentials)
        newCredentials[field]=text
        this.setState({
            credentials:newCredentials
        })
    }

    register(){
        //this.props.navigation.navigate("main")
        alert(JSON.stringify(this.state.credentials))
    }

    render(){
        return(
            <View 
            style={{height:100 + "%", width:100+"%",flex:1,justifyContent:"center",alignItems:"center"}}
            
            >
            <Text>Register</Text>
            <TextInput 
            onChangeText={(text) => this.updateText(text,"login")}
            value={this.state.login} 
            autoCorrect={false} 
            placeholder="Username" 
            style={style.input}>
            </TextInput>
            <TextInput 
            onChangeText={(text) => this.updateText(text,"password")}
            value={this.state.password} 
            autoCorrect={false} 
            secureTextEntry 
            placeholder="Password" 
            style={style.input}>
            </TextInput>
            <Button title="Register" onPress={()=>{this.register();}}></Button>

            <TouchableOpacity><Text>Already Member</Text></TouchableOpacity>

            </View>
        )
    }

    
}


export default Register 


const style = StyleSheet.create({
    input:{
        height: 50,
        width:100+"%" ,
        color:'#FFFFFF',
        borderColor: '#1B4F72', 
        backgroundColor: '#0099FF',
        fontSize:20,
        borderWidth: 3,
        marginHorizontal:50,
        marginBottom:10
    }
});

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir