Login Sayfası Tasarımı

Login Sayfası Tasarımı

import { Text,View, StyleSheet,TextInput,Button,ImageBackground,TouchableHighlight } from 'react-native';

export default function App() {
  return (
<ImageBackground source={require('./arkaplan.jpg')} resizeMode="cover" style={eren.resim}>
<View style={eren.container}>
<Text style={eren.label}>Ad Soyad:</Text>
<TextInput style={eren.kutu} placeholder='AdSoyad'/>

<Text style={eren.label}>Yasiniz:</Text>
<TextInput style={eren.kutu} keyboardType='numeric' placeholder='Yasınız' />
<TouchableHighlight>
          <View style={eren.button}>
            <Text style={eren.label2}>Save</Text>
          </View>
</TouchableHighlight>

</View>
</ImageBackground>
);
}

const eren = StyleSheet.create({
  container: {
    padding:20,
    flex: '1',
    justifyContent: 'center',
    alignItems:'center',
    backgroundColor:'black,'
  },
  resim:{
    width:'100%',
    height:'100%',
    flex: '1',
    justifyContent: 'center',
  },
  kutu:{
    height:'12%',
    width:'60%',
    borderColor:'#aaa',
    borderWidth:1,
    marginBottom:15,
    paddingHorizontal:10,
    borderRadius:10,
    backgroundColor:'white',
  },
  label:{
    fontSize:20,
  },
  label2:{
    color:'white',
     fontSize:20,
  },
  button: {
    borderRadius:10,
    marginLeft:'120',
    width:'100',
    alignItems: 'center',
    backgroundColor: 'blue',
    padding: 10,
  },
});

 

Eren Zorlu

Yorumunuzu Ekleyin
Yükleniyor...