React Native - จัดแต่งทรงผม

มีสองวิธีในการจัดรูปแบบองค์ประกอบของคุณใน React Native

คุณสามารถใช้ไฟล์ styleเพื่อเพิ่มสไตล์ในบรรทัด อย่างไรก็ตามนี่ไม่ใช่แนวทางปฏิบัติที่ดีที่สุดเนื่องจากอาจอ่านโค้ดได้ยาก

ในบทนี้เราจะใช้ไฟล์ Stylesheet สำหรับจัดแต่งทรงผม

ส่วนประกอบคอนเทนเนอร์

ในส่วนนี้เราจะทำให้ส่วนประกอบคอนเทนเนอร์ของเราง่ายขึ้นจากบทที่แล้ว

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'This is my state'
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState}/>
         </View>
      );
   }
}

องค์ประกอบการนำเสนอ

ในตัวอย่างต่อไปนี้เราจะนำเข้าไฟล์ StyleSheet. ที่ด้านล่างของไฟล์เราจะสร้างสไตล์ชีตและกำหนดให้กับไฟล์stylesคงที่ โปรดทราบว่าสไตล์ของเราอยู่ในรูปแบบcamelCase และเราไม่ได้ใช้ px หรือ% สำหรับการจัดแต่งทรงผม

ในการใช้สไตล์กับข้อความของเราเราจำเป็นต้องเพิ่ม style = {styles.myText} คุณสมบัติไปยัง Text ธาตุ.

PresentationalComponent.js

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text style = {styles.myState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

const styles = StyleSheet.create ({
   myState: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

เมื่อเราเรียกใช้แอปเราจะได้รับผลลัพธ์ดังต่อไปนี้