[React Native] native-base 暗色模式使用筆記

native-base 本身有提供暗色模式的 hook 使用,所以就決定不自己寫了,這邊分享一下使用的方法。

安裝 native-base

首先是要先安裝 native-base,並且在 App 外包上 NativebaseProvider

npm install native-base
// or
yarn add native-base
import React from "react";
// 1. import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from "native-base";

export default function App() {
  // 2. Use at the root of your app
  return (
    <NativeBaseProvider>
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
        <Text>Open up App.js to start working on your app!</Text>
      </Box>
    </NativeBaseProvider>
  );
}

大部分 native-base 的組件都有兼容暗色模式,所以你可以直接用 useColorMode 或 useColorModeValue hooks來達到主題顏色切換的效果。

useColorMode

這個 hooks 會回傳三個屬性(方法):

  • colorMode: 當前主題色,值為 light | dark,預設是 light
  • setColorMode: 設定指定的主題色
  • toggleColorMode: 切換主題色

https://docs.nativebase.io/use-color-mode

function UseColorMode() {
  const {
    colorMode,
    toggleColorMode
  } = useColorMode();
  return <Center>
      <Box p="4" flex="1" maxW="300" mt={10} w="100%" bg={colorMode === "dark" ? "coolGray.800" : "warmGray.50"} safeArea>
        <Text fontSize="lg" display="flex" mb="20">
          The active color mode is{" "}
          <Text bold fontSize="lg">
            {colorMode}
          </Text>
        </Text>
        <Button onPress={toggleColorMode} h={10}>
          Toggle
        </Button>
      </Box>
    </Center>;
}

const Example = () => {
  return <NativeBaseProvider>
      <UseColorMode />
    </NativeBaseProvider>;
};

useColorModeValue

根據當前主題色判斷使用哪個主題色的樣式

function UseColorMode() {
  const {
    toggleColorMode
  } = useColorMode();
  const text = useColorModeValue("Light", "Dark");
  const bg = useColorModeValue("warmGray.50", "coolGray.800");
  return <Center>
      <Box p="4" flex="1" bg={bg} maxW="300" w="100%" mt={10} safeArea>
        <Text fontSize="lg" display="flex" mb={20}>
          The active color mode is{" "}
          <Text bold fontSize="18px">
            {text}
          </Text>
        </Text>
        <Button onPress={toggleColorMode} h={10}>
          Toggle
        </Button>
      </Box>
    </Center>;
}

const Example = () => {
  return <NativeBaseProvider>
      <UseColorMode />
    </NativeBaseProvider>;
};

使用方式

我個人使用會分兩種情況,第一種是我用的不是 native-base 提供的組件而是自己寫的組件,第二種則是使用 native-base 提供的組件。

自定義組件

獲得當前主題色然後做三元判斷:

import { useColorMode } from "native-base";
// ...
const { colorMode } = useColorMode();
const isDark = colorMode === "dark";

// ...
<View
   style={[
      styles.container,
      { backgroundColor: isDark ? "#27272a" : "white" },
   ]}
 >

</View>

native-base 的組件

基本上所有組件都會有 _light 和 _dark 的 props 可以使用:

import { Text } from "native-base";

// ...
<Text
     style={styles.actionText}
     _light={{ color: "black" }}
     _dark={{ color: "white" }}
>
    {text}
</Text>
0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論