React Native - Temel Konular
- melihcelenk
- Site Admin
- Mesajlar: 215
- Kayıt: 05 Eki 2021, 03:23
React Native - Temel Konular
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.console.log('Yazınız');
Genymotion ile birden fazla emülatör açıp projenin dizininde
komutu terminalde girildiğinde bütün cihazlarda proje çalıştırılır.react-native run-android
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',
},
});
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>
Şimdi aşağıdaki uygulamayı yapalım.
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: 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',
},