How to Use shadcn/ui in React Native Applications [Full Handbook]
freeCodeCamp.org · 软件开发
If you've built a couple of React Native apps, the following probably feels familiar. You start with a colors.ts file and a simple Button component. Everything looks fine at first. Then the design changes a few times, and that small color file starts growing. Your Button also picks up another prop every time someone asks for a slightly different style. The setup works at first, but after a few design changes, even a small update can mean checking several files across the project. Here's what a typical color file looks like after a while: export const colors = { primary: '#6e4836', primaryPressed: '#5a3a2b', textPrimary: '#261d16', textSecondary: '#72665e', // and forty more }; And here's what a typical Button looks like after a few redesigns: <Button variant="primary" size="md" fullWidth loading={busy} containerStyle={styles.checkoutButton} labelStyle={styles.checkoutLabel} /> These are simplified examples, but you get the idea. The color object keeps growing, and the Button collects more props to handle every new design request. Each change seems reasonable when you make it. But the annoying part comes later, when changing one design decision means checking several files to see that nothing else has changed unexpectedly. Part of the problem is how many component libraries are distributed. Their code lives in node_modules , so you usually customize them through the props and options they expose. When the library doesn't cover your exact use case, you add another prop or override. Keep doing that and the component can become harder to maintain than the original problem you were trying to solve. This is one reason I like shadcn/ui's approach. You don't install a traditional component package and treat its components as fixed. The CLI copies the source code into your project, where you can change it whenever you need to. For React Native, there's a project built around the same idea called React Native Reusables . To make this practical, I'll use React Native Reusables