Netflix Login Screen – React Native

Geliştirme expo ile yapılmıştır.
Kullanılan kütüphaneler:
native-base
@expo/vector-icons

Native base kütüphanesi için buradan dökümana ulaşabilirsiniz.

import React, { Component } from 'react';
import {
  View,Image, 
} from 'react-native';
import {
  Container, Header, Left, Body, Right, Button, Content, Text, Input, Item
} from 'native-base';

import { Ionicons} from '@expo/vector-icons';


export default class Netflix extends Component {
 
  render() {
    return (

      <Container style={{ backgroundColor: '#151517' }}> 
        <Header transparent>
          <Left>
            <Button style={{ height: 38, width: 38, margin: 10, backgroundColor: 'transparent', justifyContent: 'center' }}
              onPress={() => console.log("Test")} >
              <Ionicons style={{ paddingRight: 15 }} name="ios-arrow-back" size={25} color='#ccc' />
            </Button>
          </Left>
          <Body>
          </Body>
          <Right>
          </Right>
        </Header>

        <Content padder >

          <Image source={{ uri: "https://image.flaticon.com/icons/png/512/870/870910.png" }} style={{ height: 125, width: '100%', resizeMode: 'contain', marginTop: 30 }} />

          <Item style={{ marginTop: 50 }}>
            <Input placeholder="Kullanıcı Adı" />
          </Item>
          <Item last >
            <Input placeholder="Şifre" />
            <Text style={{ color: '#ccc', fontSize: 12, marginRight: 5 }}>Gizle</Text>
          </Item>


          <View style={{ alignItems: 'center', marginTop: 50 }}>
            <Text style={{ color: '#D51414', fontFamily: 'LatoBold', }}>GİRİŞ</Text>
            <Text style={{ color: '#cccCCC90', fontFamily: 'LatoBold', fontSize: 10, paddingBottom: 0 }}>Yusuf PAMUKÇU</Text>
          </View>

          <View style={{ height: '80%', alignItems: 'center', justifyContent: 'flex-end' }}>
            <Text style={{ color: '#ccc', fontFamily: 'LatoBold', fontSize: 12, paddingBottom: 0 }}>Şifremi unuttum!</Text>
          </View>

        </Content>
      </Container>
    );
  }
}

import React, { Component } from 'react';

import {

View,Image,

} from 'react-native';

import {

Container, Header, Left, Body, Right, Button, Content, Text, Input, Item

} from 'native-base';

import { Ionicons} from '@expo/vector-icons';

export default class Netflix extends Component {

render() {

return (

<Left>

<Button style={{ height: 38, width: 38, margin: 10, backgroundColor: 'transparent', justifyContent: 'center' }}

onPress={() => console.log("Test")} >

</Button>

</Left>

<Body>

</Body>

<Right>

</Right>

</Header>

</Item>

<Text style={{ color: '#ccc', fontSize: 12, marginRight: 5 }}>Gizle</Text>

</Item>

<Text style={{ color: '#D51414', fontFamily: 'LatoBold', }}>GİRİŞ</Text>

<Text style={{ color: '#cccCCC90', fontFamily: 'LatoBold', fontSize: 10, paddingBottom: 0 }}>Yusuf PAMUKÇU</Text>

</View>

<Text style={{ color: '#ccc', fontFamily: 'LatoBold', fontSize: 12, paddingBottom: 0 }}>Şifremi unuttum!</Text>

</View>

</Content>

</Container>

);

}

Netflix Login Screen – React Native

İlk Yorumu Siz Yapın

Bir yanıt yazın Yanıtı iptal et