Làm cách nào để thêm kiểu hoặc css vào ứng dụng của bạn bằng cách sử dụng reactnative?

Việc tạo kiểu cho ứng dụng của bạn có thể được thực hiện như sau -

• Sử dụng thành phần Biểu định kiểu
• Sử dụng các kiểu nội tuyến

Sử dụng thành phần Biểu định kiểu

Thành phần Biểu định kiểu gốc của React rất tiện dụng và gọn gàng khi bạn muốn áp dụng kiểu cho ứng dụng của mình. Để làm việc với thành phần Biểu định kiểu, trước tiên hãy nhập thành phần đó như được hiển thị bên dưới -

import { StyleSheet } from 'react-native';

Bạn có thể tạo kiểu bằng thành phần Biểu định kiểu như sau -

const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

Kiểu trên có thể được sử dụng như sau bên trong mã của bạn -

<View style={styles.container}></View>

Đây là một ví dụ sử dụng Biểu định kiểu để hiển thị thành phần FlatList -

Ví dụ 1

import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            { name: "Javascript Frameworks", isTitle: true },
            { name: "Angular", isTitle: false },
            { name: "ReactJS", isTitle: false },
            { name: "VueJS", isTitle: false },
            { name: "ReactNative", isTitle: false },
            { name: "PHP Frameworks", isTitle: true },
            { name: "Laravel", isTitle: false },
            { name: "CodeIgniter", isTitle: false },
            { name: "CakePHP", isTitle: false },
            { name: "Symfony", isTitle: false }
         ],
         stickyHeaderIndices: []
      };
   }
   renderItem = ({ item }) => {
      return (
         <View style={styles.item}>
            <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >
               {item.name}
            </Text>
         </View>
      );
   };
   render() {
      return (
         <View style={styles.container}>
            <FlatList
               data={this.state.data}
               renderItem={this.renderItem}
               keyExtractor={item => item.name}
               stickyHeaderIndices={this.state.stickyHeaderIndices}
            />
         </View>
      );
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

Đầu ra

Sử dụng kiểu nội tuyến

Bạn có thể sử dụng thuộc tính style để thêm nội tuyến các kiểu. Tuy nhiên, đây không phải là cách tốt nhất vì có thể khó đọc mã. Đây là một ví dụ làm việc về cách sử dụng kiểu nội tuyến bên trong thành phần reactnative

Ví dụ 2

xuất ứng dụng mặc định;

import React from 'react';
import { Button, View, Alert } from 'react-native';

const App = () => {
   return (
      <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
         <Button
            title="Click Me"
            color="#9C27B0"
            onPress={() => Alert.alert('Testing Button for React Native ')}
         />
      </View>
   );
}

Đầu ra