React Native - Metin Girişi

Bu bölümde size nasıl çalışacağınızı göstereceğiz TextInput React Native'deki öğeler.

Home bileşeni, girdileri içe aktaracak ve işleyecektir.

App.js

import React from 'react';
import Inputs from './inputs.js'

const App = () => {
   return (
      <Inputs />
   )
}
export default App

Girişler

Başlangıç durumunu tanımlayacağız.

Başlangıç durumunu tanımladıktan sonra, handleEmail ve handlePasswordfonksiyonlar. Bu işlevler durumu güncellemek için kullanılır.

login() işlevi yalnızca durumun mevcut değerini uyarır.

Otomatik büyük harf kullanımını devre dışı bırakmak, Android cihazlarda alt sınırı kaldırmak ve bir yer tutucu ayarlamak için metin girişlerine başka özellikler de ekleyeceğiz.

inputs.js

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

class Inputs extends Component {
   state = {
      email: '',
      password: ''
   }
   handleEmail = (text) => {
      this.setState({ email: text })
   }
   handlePassword = (text) => {
      this.setState({ password: text })
   }
   login = (email, pass) => {
      alert('email: ' + email + ' password: ' + pass)
   }
   render() {
      return (
         <View style = {styles.container}>
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Email"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleEmail}/>
            
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Password"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handlePassword}/>
            
            <TouchableOpacity
               style = {styles.submitButton}
               onPress = {
                  () => this.login(this.state.email, this.state.password)
               }>
               <Text style = {styles.submitButtonText}> Submit </Text>
            </TouchableOpacity>
         </View>
      )
   }
}
export default Inputs

const styles = StyleSheet.create({
   container: {
      paddingTop: 23
   },
   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },
   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },
   submitButtonText:{
      color: 'white'
   }
})

Giriş alanlarından birini her yazdığımızda, durum güncellenecektir. TıkladığımızdaSubmit düğmesi, girişlerden gelen metin iletişim kutusunun içinde gösterilecektir.