React Native - Tạo kiểu

Có một số cách để tạo kiểu cho các phần tử của bạn trong React Native.

Bạn có thể dùng stylethuộc tính để thêm các kiểu nội tuyến. Tuy nhiên, đây không phải là cách tốt nhất vì có thể khó đọc mã.

Trong chương này, chúng tôi sẽ sử dụng Stylesheet để tạo kiểu.

Thành phần vùng chứa

Trong phần này, chúng ta sẽ đơn giản hóa thành phần vùng chứa từ chương trước của chúng ta.

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>
      );
   }
}

Thành phần thuyết trình

Trong ví dụ sau, chúng tôi sẽ nhập StyleSheet. Ở cuối tệp, chúng tôi sẽ tạo biểu định kiểu của mình và gán nó chostyleskhông thay đổi. Lưu ý rằng phong cách của chúng tôi làcamelCase và chúng tôi không sử dụng px hoặc% để tạo kiểu.

Để áp dụng các kiểu cho văn bản của mình, chúng ta cần thêm style = {styles.myText} tài sản cho Text thành phần.

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
   }
})

Khi chúng tôi chạy ứng dụng, chúng tôi sẽ nhận được kết quả sau.