React Native – Bài 6: styling

By quangvu

Posted on January 1, 2023

3 min read

187

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ể sử dụng thuộc tính style để thêm kiểu nội tuyến. Tuy nhiên, đây không phải là cách thực hành tốt nhất vì có thể khó đọc mã.

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

Container Component

Trong phần này, chúng ta sẽ đơn giản hóa Container Component từ chương trước.

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

Presentational Component

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

Để áp dụng các kiểu cho văn bản, chúng ta cần thêm thuộc tính style = {styles.myText} vào phần tử Văn bả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
   }
})