Trong React native, có những cách nào để style cho ứng dụng?

Trong React Native, bạn có thể áp dụng style cho ứng dụng của mình bằng cách sử dụng JavaScript. Các thành phần cốt lõi của React Native đều chấp nhận một prop có tên là style. Tên của các thuộc tính style và giá trị của chúng thường khớp với cách CSS hoạt động trên web, nhưng được viết bằng cách sử dụng camel casing, ví dụ backgroundColor thay vì background-color. Prop style có thể là một plain old JavaScript object, đây là cách thường được sử dụng trong các ví dụ mã. Bạn cũng có thể truyền một mảng các style - style cuối cùng trong mảng sẽ có ưu tiên, vì vậy bạn có thể sử dụng điều này để kế thừa style. Khi một thành phần phát triển phức tạp, thường sẽ sạch sẽ hơn nếu sử dụng StyleSheet.create để định nghĩa nhiều style ở một nơi.

Dưới đây là một số cách để style cho ứng dụng trong React Native:

1. Sử dụng StyleSheet: Đây là cách khuyến nghị vì StyleSheet cung cấp một số tối ưu hóa. Bạn tạo một StyleSheet bằng cách sử dụng StyleSheet.create và sau đó áp dụng các style đó cho các thành phần bằng cách sử dụng prop style.

   jsx Copy

   import {StyleSheet, View} from 'react-native';
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#0fd0fd',
     },
     title: {
       fontSize: 20,
       color: 'red',
     },
   });
   
   const MyComponent = () => (
     <View style={styles.container}>
       <Text style={styles.title}>Hello, World!</Text>
     </View>
   );

2. Inline Styling: Áp dụng ...