模板版本：v0.4.0

`react-native-appearance`

该第三方库支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-appearance。版本所属关系如下：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-appearance	~ 0.3.6	Github Releases	0.72./0.77./0.82.*	否	API12+	0.3.4	Npm Address
@react-native-oh-tpl/react-native-appearance	<=0.3.5@deprecated	Github Releases(deprecated)	0.72./0.77.	否	API12+	0.3.4	Npm Address

1. 安装与使用

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-appearance

yarn

yarn add @react-native-ohos/react-native-appearance

示例

下面的代码展示了如何使用Appearance库：

使用时 import 的库名不变。

import React, { useState, useEffect } from "react";
import { Button, View, Text, StyleSheet, useColorScheme } from 'react-native';
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';
import { AppearanceHarmony } from 'react-native-appearance';

const AppearanceExample = () => {
  const scheme = useColorScheme();
  const currentScheme = scheme?.toString() ?? 'no-preference';

  const [listenedScheme, setListenedScheme] = useState('');
  useEffect(() => {
	const subscription = AppearanceHarmony.addChangeListener(({ colorScheme }) => {
		setListenedScheme(colorScheme ?? 'unknown');
	});
	return () => subscription.remove();
  }, []);

  const [gotScheme, setGotScheme] = useState('');
  const getAppearance = ()=> {
    const result = AppearanceHarmony.getColorScheme();
	setGotScheme(result ?? 'no-preference');
  }

  const changeAppearance = ()=> {
    const result = AppearanceHarmony.getColorScheme();
    if (result == 'dark') {
      AppearanceHarmony.set('light');
    } else if (result == 'light') {
      AppearanceHarmony.set('dark');
    }
  }

  const styles = StyleSheet.create({
    container: {
      padding: 50,
      width: '100%',
      height: '100%',
      backgroundColor: currentScheme == 'dark' ? 'lightgray': 'white'
    },
    row: {
      paddingTop: 30
    }
  });

  return (
    <Tester style={{ paddingBottom: 80 }}>
      <TestSuite name='Appearance'>
        <TestCase itShould='Display Mode'>
          <View style={styles.container}>
            <Text style={styles.row}>Current display mode:{currentScheme}</Text>
            <Text style={styles.row}>Listening display mode:{listenedScheme}</Text>
            <Text style={styles.row}>Acquired display mode:{gotScheme}</Text>
            <View style={styles.row}><Button title="Get display mode" onPress={()=>getAppearance()} /></View>
            <View style={styles.row}><Button title="Change display mode" onPress={()=>changeAppearance()} /></View>
          </View>
        </TestCase>
      </TestSuite>
    </Tester>
  );
}

2. 约束与限制

2.1. 兼容性

本文档内容基于以下版本验证通过：

RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71;
RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
RNOH: 0.82.22; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.878; ROM: 6.0.0.130;

3. 属性

"Platform"列表示该属性在原三方库上支持的平台。

"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

AppearanceProvider组件

在harmony侧，AppearanceProvider底层就是RN框架的View,属性导出同RN框架的View组件。

函数

Name	Description	Type	Required	Platform	HarmonyOS Support
`useColorScheme`	实时获取当前显示模式。返回 ColorSchemeName 对象。	`function`	No	All	yes
`getColorScheme`	获取当前显示模式。返回 ColorSchemeName 对象。	`function`	No	All	yes
`set`	设置显示模式。	`function`	No	All	yes
`setColorScheme`^{deprecated from 0.3.5}	设置显示模式。	`function`	No	OpenHarmony	yes
`addChangeListener`	监听系统显示模式变化。返回 ColorSchemeName 对象。	`function`	No	All	yes

4. 遗留问题

5. 其他

6. 开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。