Konu Başlıkları Gizle
Varsayılan olarak bildiğiniz gibi React Native CSS ve doğal olarak React gibi sınıfları desteklemez. Bunun yerine
Fakat benim gibi üşengeçseniz, halihazırda kullanılan stil yöntemi pek kullanışlı gelmiyorsa ve React'ta olduğu gibi konfor alanınızı özlüyorsanız aşağıda anlattığım yöntemle TailwindCSS sınıflarını sorunsuz bir halde React Native projeside kullanabiliyorsunuz.
Not: Kullandığımız kütüphane V3 sürümünde TailwindCSS'in 3.3.2 sürümünü destekliyor. V4 sürümünde en son sürümü destekleyecek fakat daha kararlı sürüm değil.
2.
Bu komut ile
Boylece Tailwind
Aslında buraya kadar her şey tamam. Şimdi kodumuzda
Ama bu göründüğü gibi bir süre sonra çok fazla tekrara bağlıyor ve büyük bir çileye dönüşüyor. Bu sorunu da çözmenin daha kolay yolu var.
Öncelikle bunun için projemizde
Babel sayesinde her defasında elle Native komponentlerini Nativewind komponentlerine çevirmemize gerek kalmıyor ve otomatik olarak çeviriyor.
Typescript kullananlar için
Bunu da projemize bir Typescript direktivi ekleyerek çözebiliriz. Bunun için proje dizinimizde
Bu sayede prop hatalarından kurtulmuş olursunuz ve kullandığınız linter sizi hata uyarıları ile kafanızı şişirmez.
Örnek kodla da nasıl olduğunu göstereyim:
Not: Web fontları normal olarak desteklenmiyor. Yani mutlaka önceki rehberde belirttiğim yolla kendi özel fontlarınızı projeye entegre etmeniz lazım. Konu linkine buradan erişebilirsiniz.
Bir diğer not: DaisyUI gibi Tailwind pluginlerini denemediğim için desteklendiği konusunda bir bilgim yok.
StyleSheet ile JavaScript objesi olarak biçimlendirme yapılıyor.Fakat benim gibi üşengeçseniz, halihazırda kullanılan stil yöntemi pek kullanışlı gelmiyorsa ve React'ta olduğu gibi konfor alanınızı özlüyorsanız aşağıda anlattığım yöntemle TailwindCSS sınıflarını sorunsuz bir halde React Native projeside kullanabiliyorsunuz.
Kurulumu
1. Öncelikle Nativewind ve TailwindCSS'i React Native projemize indiriyoruz.
Bash:
npm install nativewind
npm install --save-dev [email protected]Not: Kullandığımız kütüphane V3 sürümünde TailwindCSS'in 3.3.2 sürümünü destekliyor. V4 sürümünde en son sürümü destekleyecek fakat daha kararlı sürüm değil.
2.
Bash:
npx tailwindcss initBu komut ile
tailwind.config.js kofnigurasyon dosyamızı oluşuturalım içeriğini aşağıdakı gibi değiştirelim:
JavaScript:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./App.{js,jsx,ts,tsx}',
'./screens/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {},
plugins: [],
};Boylece Tailwind
content dizinindeki dosyaları izleyecek ve gerekli sınıfları ona ekleyecek.Aslında buraya kadar her şey tamam. Şimdi kodumuzda
{styled} fonksiyonunu çağırarak işlemi halledebiliriz.
JSX:
import { Text } from "react-native";
import { styled } from "nativewind";
const StyledText = styled(Text);
export function BoldText(props) {
return <StyledText className="text-bold" {...props} />;
}Ama bu göründüğü gibi bir süre sonra çok fazla tekrara bağlıyor ve büyük bir çileye dönüşüyor. Bu sorunu da çözmenin daha kolay yolu var.
Öncelikle bunun için projemizde
babel.config.js dosyasını açıyoruz ve aşağıdakı gibi düzenliyoruz.
JavaScript:
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: ['nativewind/babel'],
};Babel sayesinde her defasında elle Native komponentlerini Nativewind komponentlerine çevirmemize gerek kalmıyor ve otomatik olarak çeviriyor.
Typescript kullananlar için className prop hatasını nasıl düzeltiriz peki?
Bunu da projemize bir Typescript direktivi ekleyerek çözebiliriz. Bunun için proje dizinimizde
nativewind-env.d.ts isimli dosya oluşturalım ve içine aşağıdakı satrı ekleyelim:
JavaScript:
/// <reference types="nativewind/types" />Bu sayede prop hatalarından kurtulmuş olursunuz ve kullandığınız linter sizi hata uyarıları ile kafanızı şişirmez.
Kullanımı
TailwindCSS ile aşina olanlar yine aynı yolla kullanmaya devam edebilirler. Tailwind sınıflarının birçoğu sorunsuz biçimde çalışır durumda.Örnek kodla da nasıl olduğunu göstereyim:
JSX:
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Platform,
Image,
} from 'react-native';
import React from 'react';
interface ButtonProps {
platform: string;
callback: () => void;
}
const Button = ({platform, callback}: ButtonProps) => {
return (
<TouchableOpacity
onPress={callback}
className="bg-background rounded-2xl border-2 px-[72px] py-4 mb-2.5 items-center justify-center flex-row">
<Text style={styles.font} className="text-text mr-2.5">
Continue with {platform}
</Text>
{platform === 'Google' ? (
<Image
style={styles.logo}
source={require('../../assets/google.png')}
/>
) : (
<Image style={styles.logo} source={require('../../assets/email.png')} />
)}
</TouchableOpacity>
);
};Not: Web fontları normal olarak desteklenmiyor. Yani mutlaka önceki rehberde belirttiğim yolla kendi özel fontlarınızı projeye entegre etmeniz lazım. Konu linkine buradan erişebilirsiniz.
Bir diğer not: DaisyUI gibi Tailwind pluginlerini denemediğim için desteklendiği konusunda bir bilgim yok.
Son düzenleyen: Moderatör:
