React 本地应用程序的亮层 UI 主题
此软件包提供 主题 支持使用Brightlayer UI设计系统的Eaton应用程序. 它包括使用 React Industrial 开发者的资源 反应-内生纸。本包包含两个主题选项:蓝色主题(标准)和黑暗主题.
关于其他框架,请检查我们的有关包:
安装
用 npm 安装
npm install --save @brightlayer-ui/react-native-themes
线条
yarn add @brightlayer-ui/react-native-themes
或展览
yarn expo install @brightlayer-ui/react-native-themes
使用量
注: 使用 Blightlayer 的 UI React 本地主题需要您在应用程序中添加 Open Sans 字体 。 你可以通过阅读指令来学习如何做到这一点 香草反应原生 或者说 博览。如果您以 @ blightlayer-ui/ cli (英语)。 。 。 .
使用 Expo 时, 您需要指定您使用格式加载的每个字体重的名称
OpenSans-<Weight>例如: OpenSans-SemiBold. (中文(简体) ). 参考我们的一个反动土著演示.
在您的应用程序中使用我们的主题, 只需将应用程序包入 Provider 并传递您想要的主题(例如, blue, (中文(简体) ), blueDark) (中文(简体) ).
光主题
import { Provider as ThemeProvider} from 'react-native-paper';
import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
...
// Default Theme
<ThemeProvider theme={BLUIThemes.blue}>
<App />
</ThemeProvider>
黑暗主题
import { Provider as ThemeProvider} from 'react-native-paper';
import * as BLUIThemes from '@brightlayer-ui/react-native-themes';
...
<ThemeProvider theme={BLUIThemes.blueDark}>
<App />
</ThemeProvider>
反弹原生纸张组件样式覆盖
此文档包含多个组件的一组样式覆盖 反应原生纸 组件.
默认情况下,RNP提供的主题化机制非常微乎其微,不能让我们精确地按照我们想要的Brightlayer UI应用程序的方式来样式组件. 主题不包含所有绕过这个问题的大小写, 对于某些组件, 您可能需要添加额外的样式或主题覆盖内线, 使其与 Brightlayer UI 应用程序一致
要给文档中列出的组件样式以查看应用程序中的正确性,请使用 亮层 UI 组件样式覆盖 取代React Independent Paper的相应组件.
类型脚本
我们的Brightlayer UI主题扩展了React Independence提供的主题. 如果您在 TypeScript 工程中使用这些主题, 想要访问默认中添加的任何属性, 您需要使用Expended 工程中的主题钩子 :
import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
...
const theme = useExtendedTheme();
<Button mode="contained" style={{ backgroundColor: theme.colors.onOrangeFilledContainer }}>
Label
</Button>
在您的工程中使用 FontWight 钩
当应用程序中文本元素的字体Family需要修改时,您可以使用使用FontWight钩. 例如,将字体Weight设置为"粗体",您可以使用FontWeight()的钩子,如下所示:
import { useFontWeight } from '@brightlayer-ui/react-native-themes';
...
const fontStyleBold = useFontWeight('700');
<Text variant={'headlineLarge'} style={{ ...fontStyleBold }}>
headlineLarge
</Text>
从版本6升级到 > 7
在第七版中,图书馆已经更新,以便使用 反应原生纸 v5,正在通过 材料设计 3。这些主题现已更新,以便使用材料设计3主题.