Button, Picker, Slider ve Switch bileşenleri kullanarak herhangi bir platformda kullanıcı arayüzü kontrolleri oluşturulabilir. Bu bölümde, bu bileşenlerin temel özellikleri gösterilecektir.
Button, çoğu görsel programlama dillerinde standart bir bileşen olmuş ve bir fonksiyonu tetiklemek için kullanılan sıklıkla kullanılan kullanıcıların aşina olduğu bir bileşendir. 4 Button oluşturup bir fonksiyona bağlayalım ve Button’un temel özelliklerini görelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React, { Component } from 'react'; import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native'; import * as globalStyles from '../styles/global'; export default class App extends Component { _onPressButton() { Alert.alert('Button\'a tıkladınız!!!') } render() { return ( <View style={globalStyles.styles.container}> <View style={styles.buttonContainer}> <Button onPress={this._onPressButton} title="Tıkla 01" /> </View> <View style={styles.buttonContainer}> <Button onPress={this._onPressButton} title="Tıkla 02" color="#841584" /> </View> <View style={styles.alternativeLayoutButtonContainer}> <Button onPress={this._onPressButton} title="Tıkla 03!" /> <Button onPress={this._onPressButton} title="Tamam!" color="#841584" /> </View> </View> ); } } const styles = StyleSheet.create({ buttonContainer: { margin: 20 }, alternativeLayoutButtonContainer: { margin: 20, flexDirection: 'row', justifyContent: 'space-between' } }); |
Button bileşeni etiketi içindeki onPress fonksiyon bağlantısını kurarken title Button başlığını belirleme ve color Button rengini belirleme için kullanılır. onPress olayına _onPressButton fonksiyonu bağlanmıştır. Bu fonksiyon Alert API’si ile bağlantı kurup ekrana ufak bir uyarı penceresi üretir. Alert API’si kullanmak içinde import etmeyi unutmayın.
Picker, seçimlik bir kaç durumdan bir tanesi seçmek için kullanılır. Html’deki select-option konusuna benzer bir yapıya sahiptir. Örneğin,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React, { Component } from 'react'; import {Text, Picker, View } from 'react-native'; import * as globalStyles from '../styles/global'; export default class App extends Component { constructor(props) { super(props); this.state = { language: 'java', }; } render() { return ( <View style={globalStyles.styles.container}> <Picker selectedValue={this.state.language} style={{ height: 50, width: 100 }} onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}> <Picker.Item label="Java" value="java" /> <Picker.Item label="JavaScript" value="js" /> <Picker.Item label="C#" value="cs" /> <Picker.Item label="Python" value="py" /> </Picker> <Text>Seçilen değer: {this.state.language}</Text> </View> ); } } |
Picker.İtem Picker bileşeninin bir öğesini işaret eder. Bu öğe içinde label değeri kullanıcının gördüğü değeri, value değeri ise geliştiricinin kullanacağı değeri tutar. OnValueChange olayı Picker’da bir seçim yapıldığı zaman devreye girer. constructor sayesinde language başlangıç değeri java olarak atanmış ve her değişimde language değeri de değiştirilmiştir. language değerini görmek içinde Text bileşeni kullanılmıştır.
Switch, bir True/False girişi oluşturur. Görsel olarak açma kapama yapabileceğiniz basit bir anahtar vardır. Slider, belli bir değer aralığından tek değer seçme için kullanılır. Örneğin,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import React, { Component } from 'react'; import {Text, View, Switch, Slider } from 'react-native'; import * as globalStyles from '../styles/global'; export default class App extends Component { constructor(props) { super(props); this.state = { switch_durum: true, slider_durum: 50 }; } degistir = (value) => { this.setState({switch_durum: value}) } slider_degistir(value) { this.setState({slider_durum: parseFloat(value)}) } render() { return ( <View style={globalStyles.styles.container}> <Text>Switch Örneği: </Text> <Switch value={this.state.switch_durum} onValueChange={this.degistir}/> <Text>{this.state.switch_durum ? "Açık": "Kapalı"}</Text> <Text>{String(this.state.slider_durum)}</Text> <Slider style = {{width: 300}} step={1} maximumValue={100} onValueChange={this.slider_degistir.bind(this)} value={this.state.slider_durum} /> </View> ); } } |
Switch, onValueChange olayı değer değiştiğinde devreye girer ve degistir fonksiyonunu (arrow fonksiyon örneği) çalıştırır. Değiştir fonksiyonu state içindeki switch_durum değerini günceller. value değerinde bu değer gösterilir.
Slider, onValueChange bir değişiklik olduğunda devreye girer ve veriyi state bölümüne gönderir. Burada, slider_degistir fonksiyonu devreye girer, bu fonksiyon standart bir fonksiyon gibi tanımlanmıştır. value değeri bind(this) ile gönderilir. Slider value’su state içinde tutulan slider_durum değerini gösterir. Style bölümünde slider büyüklüğü, step bölümünde adım değeri ve maximimValue ise değerin ulaşacağı maksimum değeri belirtir.