จะเพิ่มสไตล์หรือ css ให้กับแอปของคุณโดยใช้ reactnative ได้อย่างไร?

การจัดรูปแบบแอปสามารถทำได้ดังนี้ -

• การใช้องค์ประกอบสไตล์ชีต
• การใช้รูปแบบอินไลน์

การใช้องค์ประกอบสไตล์ชีต

องค์ประกอบ React Native Stylesheet นั้นสะดวกและเรียบร้อยมากเมื่อคุณต้องการนำสไตล์ไปใช้กับแอปของคุณ หากต้องการทำงานกับองค์ประกอบสไตล์ชีตก่อนอื่นให้นำเข้าตามที่แสดงด้านล่าง -

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>

นี่คือตัวอย่างที่ใช้ Stylesheet สำหรับแสดงองค์ประกอบ 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>
   );
}

ผลลัพธ์