rn-styling
应用 React Native 样式模式
React Native 样式与 Web CSS 不同。此技能提供经过验证的 NativeWind、BrandColors、平台特定样式和响应式布局模式,用于构建一致的跨平台移动 UI。
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "rn-styling". 使用品牌颜色和 NativeWind 为卡片组件设置样式
Resultado esperado:
```typescript
import { BrandColors } from '@/constants/BrandColors';
// Hybrid approach: NativeWind for layout, BrandColors for semantic colors
<View className="flex-1 p-4 rounded-lg" style={{ backgroundColor: BrandColors.cardBackground }}>
<Text className="text-lg font-semibold" style={{ color: BrandColors.textPrimary }}>
Card Title
</Text>
</View>
```
A utilizar "rn-styling". 处理平台特定的阴影
Resultado esperado:
```typescript
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
shadow: Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
},
android: {
elevation: 4,
},
}),
});
```
A utilizar "rn-styling". 使用断点创建响应式布局
Resultado esperado:
```typescript
import { useWindowDimensions } from 'react-native';
function ResponsiveLayout() {
const { width } = useWindowDimensions();
const isTablet = width >= 768;
return (
<View className={`p-2 sm:p-4 md:p-6 ${isTablet ? 'flex-row' : 'flex-col'}`} />
);
}
```
Auditoria de Segurança
SeguroAll 42 static findings are false positives. The scanner misidentified TypeScript code examples (backticks for template literals), React Native platform APIs (Platform.OS, Platform.select), and YAML frontmatter as security issues. This is a legitimate documentation skill with no malicious code or security risks.
Pontuação de qualidade
O Que Você Pode Construir
移动应用开发者创建新组件
使用 NativeWind 类和语义化 BrandColors 构建新的 React Native 界面时应用一致的样式模式。
跨平台团队标准化 UI
使用平台特定模式和响应式断点在 iOS 和 Android 团队中建立一致的样式约定。
React Native 开发者添加深色模式
在现有 React Native 应用程序中实现主题感知颜色和 BrandColorsDark 变体,以支持浅色和深色模式。
Tente Estes Prompts
如何使用 NativeWind 为 React Native 组件设置样式?向我展示如何应用内边距、背景颜色和圆角。
帮我为 React Native 应用设置 BrandColors。我需要主色、次要色、背景色和文本的语义化颜色,并支持深色模式。
我的阴影在 iOS 上有效但在 Android 上无效。如何在 React Native 中处理平台特定样式?向我展示 Platform.select 和 NativeWind 两种方法。
我需要创建一个适应平板和手机屏幕的响应式卡片组件。它应该处理安全区域、键盘避让并支持动画过渡。向我展示完整的模式。
Melhores Práticas
- 使用 BrandColors 处理语义化颜色(主色、背景色、文本色),使用 NativeWind 处理布局工具类(内边距、外边距、flex)
- 谨慎应用 NativeWind 类的顺序,因为 React Native 不会层叠样式 - 对于冲突的属性,最后一个类会生效
- 为动画组件组合样式数组而不是展开 StyleSheet 对象,以避免在每次渲染时创建新对象
Evitar
- 在组件中直接硬编码十六进制颜色而不使用 BrandColors - 这会破坏主题一致性
- 使用 NativeWind 颜色类如 bg-blue-500 作为品牌颜色 - 这些应该来自 BrandColors
- 展开样式对象如 style={{ ...styles.card, opacity: fadeAnim }} - 这会在每次渲染时创建新对象,导致性能问题