React Native - Temel Konular

[melihcelenk]

console.log('Yazınız');

ile konsol loglaması yapılabilir ve React Native DevMenu üzerinde Debug seçilip tarayıcıda konsol açıldığında bu loglar görülebilir.

Genymotion ile birden fazla emülatör açıp projenin dizininde

react-native run-android

komutu terminalde girildiğinde bütün cihazlarda proje çalıştırılır.

Aşağıda stillerin bulunduğu kısmı düzenleyelim.

Kod: Tümünü seç

const styles = StyleSheet.create({
  container: {
    paddingTop: 33,
    backgroundColor: 'yellow',
  },
  box: {
    width: 100,
    height: 100,
    borderWidth: 3,
    borderColor: 'green',
    marginBottom: 5,
  },
  box1: {
    backgroundColor: 'aquamarine',
  },
  box2: {
    backgroundColor: 'blue',
  },
});

Box view'larının her biri iki stilin özelliklerini göstermektedir. Bunlar container stilinin olduğu view'ın içinde yer almaktadır.

Kod: Tümünü seç

      <ScrollView
		contentInsetAdjustmentBehavior="automatic"
	        style={backgroundStyle}>
        	<View style={styles.container}>
		        <View style={[styles.box, styles.box1]}><Text>Kutu1</Text></View>
		        <View style={[styles.box, styles.box2]}><Text>Kutu2</Text></View>
	        </View>
      </ScrollView>

flexDirection 'row' olarak verilirse birincil eksen yatay olur. İçindeki elemanlar yatay olarak sıralanır.

Şimdi aşağıdaki uygulamayı yapalım.

Animation.gif (44.3 KiB) 519 kere görüntülendi

App.js dosyamızı aşağıdaki gibi düzenleyelim. Aşağıdaki bağlantıdan görebilirsiniz.

https://snack.expo.dev/@melihcelenk/kutular

Kod: Tümünü seç

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    flexGrow: 1,
    backgroundColor: 'white',
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <View style={styles.root}>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={backgroundStyle}>
          <View style={[styles.container, styles.container1]}>
            <View style={[styles.box, styles.box1]}>
              <Text>Kutu1</Text>
            </View>
            <View style={[styles.box, styles.box2]}>
              <Text>Kutu2</Text>
            </View>
            <View style={[styles.box, styles.box3]}>
              <Text style={styles.text3}>Kutu3</Text>
            </View>
          </View>
          <View style={[styles.container, styles.container2]}>
            <View style={[styles.box, styles.box1]}>
              <Text>Kutu1</Text>
            </View>
            <View style={[styles.box, styles.box2]}>
              <Text>Kutu2</Text>
            </View>
            <View style={[styles.box, styles.box3]}>
              <Text style={styles.text3}>Kutu3</Text>
            </View>
          </View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  root: {
    padding: 20,
    backgroundColor: 'red',
    flex: 1,
    paddingBottom: 450,
  },
  container: {
    padding: 5,
    flex: 1,
    flexDirection: 'row',
  },
  container1: {
    backgroundColor: 'yellow',
  },
  container2: {
    backgroundColor: 'purple',
  },
  box: {
    width: 100,
    height: 100,
    borderWidth: 3,
    borderColor: 'green',
    margin: 5,
  },
  box1: {
    backgroundColor: 'aquamarine',
  },
  box2: {
    backgroundColor: 'blue',
  },
  box3: {
    backgroundColor: 'black',
  },
  text3: {
    color: 'white',
  },
});

export default App;

justifyContent ve alignItems
justifyContent: Birincil eksendeki elemanların nasıl hizalanacağını belirtir.
alignItems: İkincil eksendeki elemanların nasıl hizalanacağını belirtir.

Şimdi kutuları yatayda ortaya hizalamak için yukarıdaki kodda container stiline gidelim ve justifyContent'i center olarak ayarlayalım.

flexDirection'ımız row olduğu için birincil eksenimiz yatay idi. Bu nedenle justifyContent'i kullandık. flexDirection'ımız column olsaydı birincil eksenimiz dikey eksen olurdu ve alignItems: 'center' kullanırdık.

center yerine flex-start, flex-end, space-between, space-around ifadelerini kullanarak başka görünümler elde edebiliriz.

Kod: Tümünü seç

  container: {
    padding: 5,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
  },

box'lar için width verip height'ın otomatik olarak tamamlanmasını istersek alignItems: 'stretch' ifadesini kullanabiliriz.