Làm cách nào để bạn style cho một component trong RN?

{{FormatNumbertoThousand(model.total_like)}} lượt thích
201 lượt xem
  • Với React Native, bạn style ứng dụng của mình bằng JavaScript.
  • Tất cả các component cốt lõi đều chấp nhận một prop có tên style. Các tên và giá trị style thường khớp với cách CSS hoạt động trên web, ngoại trừ các tên được viết bằng cách viết hoa camel, ví dụ: backgroundColor chứ không phải background-color.
  • style có thể là một đối tượng JavaScript thuần đơn giản. Đó là cách đơn giản nhất và những gì chúng ta thường sử dụng để làm mã ví dụ.
  • Bạn cũng có thể chuyển một mảng style - style cuối cùng trong mảng được ưu tiên, vì vậy bạn có thể sử dụng điều này để kế thừa các style.

Khi một component ngày càng phức tạp, việc sử dụng StyleSheet.create để định nghĩa một số style ở một nơi sẽ dễ dàng hơn. Đây là một ví dụ:

const styles = StyleSheet.create({
   container: {
      borderRadius: 4,
      borderWidth: 0.5,
      borderColor: '#d6d7da',
   },
   title: {
      fontSize: 19,
      fontWeight: 'bold',
   },
   activeTitle: {
      color: 'red',
   },
});

<View style={styles.container}>
   <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>
{{login.error}}