如何使用 @shopify/restyle 在 React Native 中构建类型强制的 UI 组件

自从我在博客上写一篇技术文章以来已经有一段时间了，这是一篇关于使用 @shopify/restyle 和 expo 在 react native 中构建类型强制 ui 组件的新文章。

@shopify/restyle 是一个强大的 react native 样式库，可为您的 ui 组件带来类型安全性和一致性。与传统的样式方法不同，restyle 允许您创建集中式主题配置，在整个应用程序中强制执行设计系统原则。

入门

项目设置

使用 expo 设置您的 react native 项目

npx create-expo-app@latest

登录后复制转到您的项目目录并使用 expo 安装 @shopify/restyle 包

cd /path/to/projectnpx expo install @shopify/restyle

登录后复制

创建你的主题

创建 theme.tsx 文件来定义您的设计系统：

touch theme.tsx

登录后复制复制并粘贴默认主题配置

import {createtheme} from '@shopify/restyle';const palette = {  purplelight: '#8c6ff7',  purpleprimary: '#5a31f4',  purpledark: '#3f22ab',  greenlight: '#56dcba',  greenprimary: '#0ecd9d',  greendark: '#0a906e',  black: '#0b0b0b',  white: '#f0f2f3',};const theme = createtheme({  colors: {    mainbackground: palette.white,    cardprimarybackground: palette.purpleprimary,  },  spacing: {    s: 8,    m: 16,    l: 24,    xl: 40,  },  textvariants: {    header: {      fontweight: 'bold',      fontsize: 34,    },    body: {      fontsize: 16,      lineheight: 24,    },    defaults: {      // we can define a default text variant here.    },  },});export type theme = typeof theme;export default theme;

登录后复制

实施主题提供者

更新您的 app/_layout.tsx：

import { darktheme, defaulttheme } from "@react-navigation/native";import { usefonts } from "expo-font";import { stack } from "expo-router";import * as splashscreen from "expo-splash-screen";import { statusbar } from "expo-status-bar";import { useeffect } from "react";import "react-native-reanimated";import { themeprovider } from "@shopify/restyle";import theme from "@/theme";// prevent the splash screen from auto-hiding before asset loading is complete.splashscreen.preventautohideasync();export default function rootlayout() {  const [loaded] = usefonts({    spacemono: require("../assets/fonts/spacemono-regular.ttf"),  });  useeffect(() => {    if (loaded) {      splashscreen.hideasync();    }  }, [loaded]);  if (!loaded) {    return null;  }  return (                                            );}

登录后复制

创建可重用组件

文本组件

touch components/text.tsx

登录后复制

// in components/text.tsximport {createtext} from '@shopify/restyle';import {theme} from '../theme';export const text = createtext();

登录后复制

让我们在主屏幕上使用它

import { text } from "@/components/text";import { safeareaview } from "react-native-safe-area-context";export default function homescreen() {  return (                  this is the home screen. built using @shopify/restyle.            );}

登录后复制

正如您在上面的代码中看到的，我们将边距作为“m”而不是数字传递。我们从 theme.tsxfile 中获取值。

// ./theme.tsxconst theme = createtheme({  spacing: {    s: 8,    m: 16, // margin="m"    l: 24,    xl: 40,  },  textvariants: {    header: { // our text header variant      fontweight: 'bold',      fontsize: 34,    },    body: {      fontsize: 16,      lineheight: 24,    },  },    // ...rest of code  },});

登录后复制

这就是我们的主页视图的外观

);};type props = spacingprops & variantprops & backgroundcolorprops & react.componentprops;const cardskeleton = createrestylecomponent([ spacing, createvariant({ themekey: “cardvariants” }),]);export const skeletonloader = () => { return ( );};登录后复制

瞧，我们使用 @shopify/restyle 使用

制作了一个骨架加载卡

支持深色模式

让我们从在 theme.tsx 文件中添加深色主题配置开始

// theme.tsxexport const darktheme: theme = {  ...theme,  colors: {    ...theme.colors,    mainbackground: palette.white,    cardprimarybackground: palette.purpledark,    greenprimary: palette.purplelight,  },  textvariants: {    ...theme.textvariants,    defaults: {      ...theme.textvariants.header,      color: palette.purpledark,    },  },

登录后复制

通过将深色主题配置添加到我们的layout.tsx 文件中来将其添加到我们的应用布局中

 // app/_layout.tsximport { usefonts } from "expo-font";import { stack } from "expo-router";import * as splashscreen from "expo-splash-screen";import { statusbar } from "expo-status-bar";import { useeffect } from "react";import "react-native-reanimated";import { themeprovider } from "@shopify/restyle";import theme, { darktheme } from "@/theme";import { usecolorscheme } from "react-native";// prevent the splash screen from auto-hiding before asset loading is complete.splashscreen.preventautohideasync();export default function rootlayout() {  const [loaded] = usefonts({    spacemono: require("../assets/fonts/spacemono-regular.ttf"),  });  const colorschema = usecolorscheme();  useeffect(() => {    if (loaded) {      splashscreen.hideasync();    }  }, [loaded]);  if (!loaded) {    return null;  }  return (                                            );}

登录后复制使用react-native中的usecolorscheme钩子获取颜色模式

  // app/_layout.tsx import { usecolorscheme } from "react-native";  //... rest of the code  const colorschema = usecolorscheme();

登录后复制基于颜色模式，使用默认的浅色主题或在深色模式下使用 theme.tsx 文件中定义的 darktheme 配置

 // app/_layout.tsx import theme, { darkTheme } from "@/theme"; //... rest of the code                                          

登录后复制

这是深色和浅色模式。

瞧，我们成功地使用 @shopify/restyle 包创建了类型强制的 ui 组件

谢谢你:)

以上就是如何使用 @shopify/restyle 在 React Native 中构建类型强制的 UI 组件的详细内容，更多请关注【创想鸟】其它相关文章！