React Native-এ স্টাইলিং বা CSS যোগ করার পদ্ধতি

React Native-এ অ্যাপে স্টাইলিং বা CSS যোগ করা যায় নিচের দুটি পদ্ধতিতে:

Stylesheet কম্পোনেন্ট ব্যবহার করে
ইনলাইন স্টাইলস ব্যবহার করে

Stylesheet কম্পোনেন্ট ব্যবহার করে

React Native Stylesheet কম্পোনেন্ট খুব হ্যান্ডি এবং সুন্দর যখন আপনি অ্যাপে স্টাইলিং যোগ করতে চান। Stylesheet কম্পোনেন্ট ব্যবহার করতে হলে প্রথমে ইম্পোর্ট করুন নিচের মতো:

import { StyleSheet } from 'react-native';

Stylesheet কম্পোনেন্ট ব্যবহার করে স্টাইল তৈরি করা যায় নিচের মতো:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        margin: 10,
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    }
});

উপরের স্টাইলটি আপনার কোডে নিচের মতো ব্যবহার করা যায়:

FlatList কম্পোনেন্ট ডিসপ্লে করার জন্য Stylesheet ব্যবহার করে একটি উদাহরণ:

উদাহরণ ১

import React from "react";
import { FlatList, Text, View, StyleSheet, StatusBar } from "react-native";

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            data: [
                { name: "Javascript Frameworks", isTitle: true },
                { name: "Angular", isTitle: false },
                { name: "ReactJS", isTitle: false },
                { name: "VueJS", isTitle: false },
                { name: "ReactNative", isTitle: false },
                { name: "PHP Frameworks", isTitle: true },
                { name: "Laravel", isTitle: false },
                { name: "CodeIgniter", isTitle: false },
                { name: "CakePHP", isTitle: false },
                { name: "Symfony", isTitle: false }
            ],
            stickyHeaderIndices: []
        };
    }
    renderItem = ({ item }) => {
        return (
            
                {item.name}
            
        );
    };
    render() {
        return (
            
                 item.name}
                    stickyHeaderIndices={this.state.stickyHeaderIndices}
                />
            
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        margin: 10,
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    }
});

আউটপুট

React Native-এ স্টাইলিং বা CSS যোগ করার পদ্ধতি

ইনলাইন স্টাইলস ব্যবহার করে

আপনি style প্রপার্টি ব্যবহার করে ইনলাইন স্টাইল যোগ করতে পারেন। তবে এটি সেরা অভ্যাস নয় কারণ কোড পড়তে কঠিন হয়। React Native কম্পোনেন্টে ইনলাইন স্টাইল ব্যবহার করার একটি ওয়ার্কিং উদাহরণ:

উদাহরণ ২

export default App;

import React from 'react';
import { Button, View, Alert } from 'react-native';

const App = () => {
    return (

আউটপুট

React Native-এ স্টাইলিং বা CSS যোগ করার পদ্ধতি