প্রতিক্রিয়াশীল ব্যবহার করে আপনার অ্যাপে স্টাইলিং বা সিএসএস কীভাবে যুক্ত করবেন?

আপনার অ্যাপকে স্টাইল করা নিম্নরূপ করা যেতে পারে -

• স্টাইলশীট উপাদান ব্যবহার করে
• ইনলাইন শৈলী ব্যবহার করা

স্টাইলশীট উপাদান ব্যবহার করা

আপনি যখন আপনার অ্যাপে স্টাইলিং প্রয়োগ করতে চান তখন প্রতিক্রিয়া নেটিভ স্টাইলশীট উপাদানটি খুব সহজ এবং ঝরঝরে আসে। স্টাইলশীট কম্পোনেন্টের সাথে কাজ করার জন্য প্রথমে এটি নীচে দেখানো হিসাবে আমদানি করুন -

import { StyleSheet } from 'react-native';

আপনি নিচের মত স্টাইলশীট উপাদান ব্যবহার করে শৈলী তৈরি করতে পারেন -

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

উপরের স্টাইলটি আপনার কোড -

<View style={styles.container}></View>

এখানে একটি উদাহরণ রয়েছে যা FlatList উপাদান −

উদাহরণ 1

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 (
         <View style={styles.item}>
            <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >
               {item.name}
            </Text>
         </View>
      );
   };
   render() {
      return (
         <View style={styles.container}>
            <FlatList
               data={this.state.data}
               renderItem={this.renderItem}
               keyExtractor={item => item.name}
               stickyHeaderIndices={this.state.stickyHeaderIndices}
            />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

আউটপুট

ইনলাইন শৈলী ব্যবহার করা

আপনি শৈলী ইনলাইন যোগ করতে শৈলী সম্পত্তি ব্যবহার করতে পারেন. যাইহোক, এটি সর্বোত্তম অনুশীলন নয় কারণ কোডটি পড়া কঠিন হতে পারে। প্রতিক্রিয়াশীল উপাদানের ভিতরে কিভাবে ইনলাইন স্টাইল ব্যবহার করতে হয় তার একটি কার্যকর উদাহরণ এখানে দেওয়া হল

উদাহরণ 2

ডিফল্ট অ্যাপ রপ্তানি করুন;

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

const App = () => {
   return (
      <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={() => Alert.alert('Testing Button for React Native ')}
         />
      </View>
   );
}

আউটপুট