Top Ad unit 728 × 90

Lập trình React Native: Tìm hiểu Style

Thời gian trước mình đã cùng các bạn đi tìm hiểu 2 thành phần quan trọng React Native là stateprops rồi hôm nay mình sẽ cùng các bạn tìm hiểu thêm một thành phần nữa. Thành phần này giúp cho ứng dụng của bạn trở nên sinh động hơn, đẹp hơn và thành phần đó không ai khác chính là Style trong React Native




React-native Thế giới tri thức.me

Với React Native, bạn không cần sử dụng một ngôn ngữ hoặc cú pháp nào đặc biệt để định dạng hay căn chỉnh layout. Bạn chỉ cần Style ứng dụng của mình bằng cách sử dụng JavaScript. Tất cả các thành phần cốt lõi đều được chấp nhận một thuộc tính style. Tên kiểu và giá trị thường khớp với cách viết CSS thông thường trên web, ngoại trừ tên được viết bằng cách sử dụng bỏ ngạch ngang đi, ví dụ như sau: backgroundColor không phải là background-color.

Đối tượng style có thể là một đối tượng JavaScript. Đó là đơn giản nhất và những gì chúng ta thường sử dụng cho mã. Bạn cũng có thể vượt qua một mảng các kiểu - kiểu cuối cùng trong mảng được ưu tiên, vì vậy bạn có thể sử dụng kiểu này để định dạng kiểu dáng.

Khi một thành phần phát triển phức tạp hơn, thường sử dụng StyleSheet.create để xác định nhiều kiểu ở một nơi. Dưới đây là một ví dụ:




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

export default class LotsOfStyles extends Component {
  render() {
    return (
      
        just red
        just bigblue
        bigblue, then red
        red, then bigblue
      
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);

Vậy là mình đã giúp các bạn hiểu về Style trong React Native rồi! Trong bài tiếp theo mình sẽ cùng các bạn đi tìm hiểu về Height and Width trong React Native.

Bài này mình sẽ dừng lại tại đây hẹn gặp các bạn trong bài tiếp theo nhé! Nếu thấy hay thì quên share cho nhiều người cùng đọc, cùng học nhé!

Chúc các bạn thành công!


Lập trình React Native: Tìm hiểu Style Reviewed by Thế Giới Tri Thức on tháng 12 24, 2017 Rating: 5

Không có nhận xét nào:

All Rights Reserved by THẾ GIỚI TRI THỨC © 2018
Thiết kế bởi: THẾ GIỚI TRI THỨC

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.