模板版本：v0.2.2

react-native-dynamic

三方库版本	支持RN版本
1.0.0	0.72/0.77

安装与使用

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

npm

npm install react-native-dynamic@1.0.0

yarn

yarn add react-native-dynamic@1.0.0

下面的代码展示了这个库的基本使用场景：

import React, { useState } from 'react';
import {
    View,
    Text, 
    Image, 
    Button
} from 'react-native';
import {
    useDarkMode,
	useDarkModeContext,
	DynamicValue,
	DynamicStyleSheet,
	DarkModeProvider,
	useDynamicValue,
	ColorSchemeProvider,
	useColorSchemeContext,
	useDynamicStyleSheet
} from 'react-native-dynamic'
import { Tester, TestSuite, TestCase } from '@rnoh/testerino';

export default function Extra() {
	const mode = useDarkModeContext()
	const styles = useDynamicStyleSheet(dynamicStyleSheet)
	return (
		<View style={styles.container}>
			<Text style={styles.text}>Forced mode: {mode}</Text>
		</View>
	)
}

const dynamicStyleSheet = new DynamicStyleSheet({
	container: {
		borderColor: 'red',
		borderWidth: 1,
		backgroundColor: new DynamicValue('white', 'black'),
		width: 150,
		height: 50,
		justifyContent: 'center',
		alignItems: 'center',
	},
	text: {
		textAlign: 'center',
		color: new DynamicValue('black', 'white'),
	},
})

function Counter() {
	const [counter, setCounter] = useState(0)
	return <Button title={counter.toString()} onPress={() => setCounter((i) => i + 1)} />
}

const backgroundColors = {
	light: 'white',
	dark: 'black',
}

function Components() {
	const styles = useDynamicValue(dynamicStyles)

	return (
		<View style={styles.container}>
			<Text style={styles.text}>My text</Text>
		</View>
	)
}

export function ReactNativeDynamic() {
	const mode = useDarkModeContext()
	const mode2 = useColorSchemeContext()
	const backgroundColor = backgroundColors[mode2]
    const isDarkMode = useDarkMode()
	const styles = useDynamicValue(dynamicStyles)
	return (
		<View style={styles.container}>
			<Tester>
        		<TestSuite name="ShowActionDynamic">
					<TestCase itShould='render mode of dark or light' tags={['C_API']} >
						<DarkModeProvider mode="dark">
							<Extra />
						</DarkModeProvider>
						<DarkModeProvider mode="light">
							<Extra />
						</DarkModeProvider>
					</TestCase>	
        		</TestSuite>
      		</Tester>
			<Image source={{ uri: 'https://github.com/codemotionapps/react-native-dynamic/blob/master/example/meme.png' }} style={styles.meme} />
			<Text style={styles.initialStyle}>Current mode: {mode}</Text>
			<Text style={styles.initialStyle}>Is dark mode: {isDarkMode ? 'black' : 'white'}</Text>

			<ColorSchemeProvider mode="dark">
				<Components />
			</ColorSchemeProvider>

			<ColorSchemeProvider mode="light">
				<Components />
			</ColorSchemeProvider>

			<Components />
		</View>
	)
}

const dynamicStyles = new DynamicStyleSheet({
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: new DynamicValue('#FFFFFF', '#000000'),
	},
	initialStyle: {
		fontSize: 20,
		textAlign: 'center',
		margin: 10,
		color: new DynamicValue('#000000', '#FFFFFF'),
	},
	image: {
		borderWidth: 1,
		borderColor: new DynamicValue('#000000', '#FFFFFF'),
		width: 80,
		height: 80,
	},
	meme: {
		width: '100%',
		height: 200,
		marginBottom: 20,
	},
	text: {
		color: new DynamicValue('black', 'white'),
		textAlign: 'center',
	},
})

约束与限制

兼容性

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

1. RNOH：0.72.26; SDK：HarmonyOS NEXT Developer Beta1；IDE：DevEco Studio 5.0.3.300; ROM：3.0.0.24;
2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
3. RNOH：0.77.18; SDK：HarmonyOS 5.1.0.150 (API Version 12); IDE：DevEco Studio 5.1.1.830; ROM：5.1.0.150;

属性

Prop	Description	Type	Required	Platform	HarmonyOS Support
useDarkMode	返回布尔值。如果暗模式开启，则为 true.	function	no	All	yes
DynamicValue	一个辅助类，用于与 DynamicStyleSheet 和 useDynamicValue 一起使用。第一个参数是用于浅色主题的值，第二个参数是用于深色主题的值.	function	no	All	yes
DynamicStyleSheet	就像 StyleSheet，但支持动态值.	function	no	All	yes
ColorSchemeProvider	允许您为儿童设置特定模式.	function	no	All	yes
useDynamicValue	根据主题返回适当的值。你可以传入 DynamicValue、包含 dark 和 light 属性的对象，或者仅传入两个参数.	function	no	All	yes
useColorSchemeContext	返回暗色或亮色，但从上下文中读取值.	function	no	All	yes

遗留问题

其他

开源协议

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