Bileşen (Component Tanımlama)

Bileşen (Component Tanımlama)

Bilesen1.js

import { View, StyleSheet } from 'react-native';

Bilesen1 = () => {
  return (
    <View style={Stil.Kutu1}>
    </View>
  )
}

const Stil = StyleSheet.create({
  Kutu1: {
    width:'20%',
    height:'10%',
    backgroundColor:'yellow',
    margin:10,
    borderColor:'grey',
    borderWidth:4,
  }
});

export default Bilesen1;

 App.js

import { Text, View, StyleSheet } from 'react-native';
import Bilesen1 from './components/Bilesen1';

export default function App() {
  return (
    <View style={styles.container}>
     <Bilesen1 />
      <Bilesen1 />
      <Bilesen1 />
      <Bilesen1 />
      <Bilesen1 />
      <Bilesen1 />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column',
    justifyContent: 'space-around',
    alignItems:'center',
    backgroundColor: 'blue',
    padding:18,
    border:10,
    borderColor:'yellow',
    margin:10
  }
});

 

 

Yorumunuzu Ekleyin
Yükleniyor...