自从我在博客上写一篇技术文章以来已经有一段时间了，这是一篇关于使用 @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 ( );};
微信扫一扫 
支付宝扫一扫 
