Tüm uygulama geliştirmelerim “expo” oluşturulmaktadır.
Sizde “expo” kullanabilirsiniz “CLI” ile artı eksi yönleri var, bana expo pratik geldiği için kullanıyorum. bir sonraki yazıda aralarındaki farklarıda paylaşırım.
Neden NativeBase dersek eğer arayüz geliştirmemizde büyük kolaylık sunuyor ve kullanılan bileşen kütüphaneleri arasında oldukça popüler ve örneklerini bol bol bulabilirsiniz.
Diğer örnekler olarak:
-Material Kit React Native
-React Native Elements
-UI Kitten
-React Native Paper
-Galio
gibi daha birçok kütüphane mevcut ama şuan konumuz NativeBase.
Yükleme adımlarına geçelim.
|
1 |
yarn add native-base --save |
expo kullandığımız için:
|
1 |
expo install expo-font |
ve kütüphanemiz hazır. App.js dosyamıza aşağıdaki kodları ekleyip çalıştırabiliriz.
Bu sayfa aslında ekrana bileşenler basıp işlem yapmak için değil, burada font tanımlama, sayfa yönlendirme işlemlerini yapacağız ama şuan için ekrana bir yazı basabilmemiz yeterli.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React from 'react'; import { AppLoading } from 'expo'; import { Container, Text } from 'native-base'; import * as Font from 'expo-font'; import { Ionicons } from '@expo/vector-icons'; export default class App extends React.Component { constructor(props) { super(props); this.state = { isReady: false, }; } async componentDidMount() { await Font.loadAsync({ Roboto: require('native-base/Fonts/Roboto.ttf'), Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'), ...Ionicons.font, }); this.setState({ isReady: true }); } render() { if (!this.state.isReady) { return <AppLoading />; } return ( <Container> <Text>Merhaba Dünya!</Text> </Container> ); } } |
NativeBase Dökümanlarından bileşenlere göz atabilirsiniz.
İlk Yorumu Siz Yapın