Tìm hiểu cách style trong react native

Với React Native, bạn có thể css cho ứng dụng của mình bằng JavaScript. Tất cả các component đều có thể nhận vào 1 prop là style .Với cách CSS hoạt động trên khá giống trên web, ngoại trừ các tên được viết bằng cách sử dụng cách viết hoa lạc đà, ví dụ: backgroundColor.

Style prop có thể là một đối tượng JavaScript Bạn cũng có thể chuyển một mảng, 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 để kế thừa các kiểu.

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

const DemoStyles = () => {
  return (
    <View style={{marginTop:50}}>
      <Text style={{color:'red'}}>just red</Text>
      <Text style={{fontWeight: 'bold',fontSize: 30, color: 'red',}}>bigBlue, then red</Text>
      <Text style={{backgroundColor:'red',color:'#fff'}}>background red</Text>
    </View>
  );
};
export default DemoStyles;

Khi một component ngày càng phức tạp, việc sử dụng StyleSheet.create để xác định một số kiểu ở một nơi thường sẽ gọn gàng hơn. Đây là một ví dụ:

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

const DemoStyle= () => {
  return (
    <View style={styles.container}>
      <Text style={styles.red}>just red</Text>
      <Text style={styles.bigBlue}>just bigBlue</Text>
      <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
      <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
    </View>
  );
};

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

export default DemoStyle;

Height and Width

Kích thước tuyệt đối theo đơn vị px

import React from 'react';
import {View} from 'react-native';

const FixedDimensionsBasics = () => {
  return (
    <View>
      <View
        style={{
          width: 50,
          height: 50,
          backgroundColor: 'powderblue',
        }}
      />
      <View
        style={{
          width: 100,
          height: 100,
          backgroundColor: 'skyblue',
        }}
      />
      <View
        style={{
          width: 150,
          height: 150,
          backgroundColor: 'steelblue',
        }}
      />
    </View>
  );
};

export default FixedDimensionsBasics;

Flex Dimensions

Sử dụng flex theo kiểu của thành phần để thành phần đó tự động mở rộng và thu nhỏ dựa trên không gian có sẵn. Thông thường, bạn sẽ sử dụng flex: 1, lệnh này yêu cầu một thành phần lấp đầy tất cả không gian có sẵn, được chia sẻ đồng đều giữa các thành phần khác có cùng cha mẹ. Độ uốn nhất định càng lớn, tỷ lệ không gian mà một thành phần sẽ chiếm càng cao so với các thành phần anh em của nó.

import React from 'react';
import {View} from 'react-native';

const FlexDimensionsBasics = () => {
  return (
   
 
    <View style={{flex: 1}}>
      <View style={{flex: 1, backgroundColor: 'powderblue'}} />
      <View style={{flex: 2, backgroundColor: 'skyblue'}} />
      <View style={{flex: 3, backgroundColor: 'steelblue'}} />
    </View>
  
  );
};

export default FlexDimensionsBasics;

​

Percentage Dimensions đơn vị % tương đối với tỉ tệ của màn hình

import React from 'react';
import {View} from 'react-native';

const PercentageDimensionsBasics = () => {
  
  return (
    <View style={{height: '100%'}}>
      <View
        style={{
          height: '15%',
          backgroundColor: 'powderblue',
        }}
      />
      <View
        style={{
          width: '66%',
          height: '35%',
          backgroundColor: 'skyblue',
        }}
      />
      <View
        style={{
          width: '33%',
          height: '50%',
          backgroundColor: 'steelblue',
        }}
      />
    </View>
  );
};

export default PercentageDimensionsBasics;

Tóm lại cách thức CSS khá giống trên web nhiệm vụ của chúng ta là xem các thuộc tính css trong react native tương ứng với thuộc tính gì trong css web