Biçimlendirme / Stil İşlemleri

  Örnek 1

import React from 'react';
import {Text, TextInput, View} from 'react-native';

const Cat = () => {
  return (
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
        }}
        defaultValue="Name me!"
      />
    </View>
  );
};

export default Cat;

 

Örnek 2

import { StyleSheet, Text, View, TextInput } from "react-native";

const App=()=>{
  return (
    <View style={styles.EnDis}>
      <TextInput style={styles.MetinKutusu} />
      <TextInput style={styles.MetinKutusu} />
      <TextInput style={styles.MetinKutusu} />      
    </View>
  );
}
const styles = StyleSheet.create({
   MetinKutusu: {
    backgroundColor: "red",
    padding:5,
    color: 'white',
    fontSize: 20,
    fontWeight:"900",
    margin: 10    
  },
  EnDis: {
    backgroundColor: "green",
    padding:20
  }
});

export default App;

 

Örnek 3

 

import { StyleSheet, Text, View, TextInput } from "react-native";
export default function App() {
  return (
    <View style={Stiller.Kapsayici}>

      <TextInput style={Stiller.Giris} placeholder="Kullanıcı Adı" maxLength={4} editable={false} keyboardType="phone-pad" />

      <TextInput style={Stiller.Giris} placeholder="Şifre" secureTextEntry={true} />
    </View>
  );
}

const Stiller = StyleSheet.create({
  Kapsayici: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#2980b9',
    padding: 8
  },
  Giris: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    //textAlign: 'center',
    backgroundColor: 'white',
    color: 'green',
    paddingLeft:10,
    borderRadius: 20,
    padding: 10,
  }
});

 

Biçimlendirme / Stil İşlemleri

 

Kaynak

Yorumunuzu Ekleyin

Yükleniyor...