Hướng dẫn sử dụng Switch component trong React Native

Switch component trong React Native  là một thành phần được kiểm soát tích hợp trong React Native để hiển thị đầu vào boolean. Nó cho phép người dùng bật hoặc tắt một số tính năng nhất định hoặc chọn giữa hai lựa chọn thay thế (bạn có thể thấy nhiều tính năng này trong trang Cài đặt của nhiều app hoặc web). Bài viết này chúng tôi sẽ giới thiệu Switch component  và hướng dẫn bạn qua ví dụ chi tiết về cách sử dụng nó trong thực tế.

Sử dụng Switch component trong React Native

Tổng quan

Import component này:

[dm_code_snippet background=”no” background-mobile=”yes” slim=”yes” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

import { Switch } from "react-native";

[/dm_code_snippet]

Lists props của Switch:

• value – dạng dữ liệu bool – Giá trị mặc định là false
• onChange : Định dạng là một function dùng để lắng nghe khi switch thay đổi.
• onValueChange: Function – Lắng nghe khi người dùng sử dụng switch bạn sẽ nhận được dữ liệu mới nhất tại đây.
• thumbColor: Màu sắc khi người dùng tiếp xúc với switch
• trackColor: Màu của switch
• ios_backgroundColor (chỉ dành cho iOS): sét background cho switch chỉ có trên iOS

Ví dụ sử dụng switch cụ thể.

Trong ứng dụng này chúng ta sẽ có 1 màn hình và chứa một switch. Khi click switch này lên, một box màu tím sẽ xuất hiện. Khi tắt công tắc, box màu tím sẽ biến mất. Trên iOS và Android, nó hoạt động như hình ảnh phía dưới:

Sử dụng Switch component trong React Native

Nếu quan sát kỹ, bạn sẽ nhận thấy rằng màu của vùng bash và track thay đổi tùy thuộc vào trạng thái của công tắc.

CODE

Trước tiên trong index.js các bạn thêm đoạn code như sau:

[dm_code_snippet background=”no” background-mobile=”yes” slim=”yes” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”javascript” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

import React, { useState } from "react";
import { StyleSheet, View, Switch } from "react-native";

export default function App() {
  // Bật hoặc tắt box
  const [isShown, setIsShown] = useState(false);

  // Function này sẽ được kích hoạt khi Switch thay đổi
  const toggleTheBox = () => {
    setIsShown((previousState) => !previousState);
  };

  return (
    <View style={styles.container}>
      <Switch
        trackColor={{ false: "#767577", true: "#4caf50" }}
        thumbColor={isShown ? "#8bc34a" : "#ddd"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleTheBox}
        value={isShown}
      />

      {isShown === true ? <View style={styles.box}></View> : null}
    </View>
  );
}

// Just some styles
const styles = StyleSheet.create({
  container: {
    paddingTop: 100,
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
    backgroundColor: "#fff",
  },
  box: {
    marginTop: 50,
    width: 300,
    height: 250,
    backgroundColor: "#673ab7",
  },
});

[/dm_code_snippet]

Kết thúc.

Bài biết trên chúng tôi đã giới thiệu đến các bạn Switch component trong React Native và một ví dụ toàn diện về cách sử dụng Switch component trong React Native. Nếu bạn muốn tìm hiểu thêm về React Native hiện đại, hãy đọc tiếp các bài viết trong chuyên mục React Native của chúng tôi.