说明

这是一个 React Native Styling 库。

For English version, please click: English。

安装

pnpm add expo-simple-styling

yarn add expo-simple-styling

依赖包

pnpm add zustand @react-navigation/native @react-native-async-storage/async-storage --save-peer

需要安装的依赖包：

• @react-native-async-storage/async-storage
• zustand
• @react-navigation/native

使用

参考示例项目。

ThemeProvider包裹根组件

_layout.tsx或根页面中用ThemeProvider包裹。

import { ThemeProvider } from 'expo-simple-styling';

...

<ThemeProvider settingsKey="example_app_theme">
  <AppContent />
</ThemeProvider>

注意每个app的settingsKey应独一无二，进行区分。

主题无关的常用风格

import {s} from 'expo-simple-styling';

// 例子
...
<View style ={s.flexCenter}>
 ...
</View>

主题相关的常用风格

其实这就是明暗颜色自动套用。

import { useTheme } from 'expo-simple-styling';

// isDark： true为暗色，false为亮色
// ts：主题颜色相关的各种style
// tx：文字相关的各种style
// cl：颜色数值
const { isDark, ts, tx, cl } = useTheme();

// 例子
...
<View style={ts.box}>
   <Text style= {tx.title}>
       Hello World
       <Text style={tx.subTitle}>
           This is a subtitle
       </Text>
   </Text>
</View>