React Native Unistyles 中通过 Props 传递样式失效的解决方案

问题背景

在使用 React Native Unistyles 库开发跨平台应用时，开发者可能会遇到一个常见问题：通过自定义组件传递的样式在 Web 平台上失效，而在移动端却能正常显示。这种情况通常发生在开发者封装基础组件（如 Text）时，希望通过 Props 传递样式属性。

问题重现

假设我们有一个跨平台的 Expo 应用，开发者创建了一个自定义的 AppText 组件来统一管理文本样式：

import React from 'react'
import { Text, TextProps } from 'react-native'

export const AppText = (props: TextProps) => {
  return <Text {...props} />
}

然后在页面中使用这个组件并尝试通过 style 属性传递样式：

import { AppText } from '@/shared/design/atomic/AppText'
import { View } from 'react-native'
import { StyleSheet } from 'react-native-unistyles'

export default () => {
  return (
    <View style={styles.container}>
      <AppText style={styles.title}>Hello world</AppText>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    color: 'blue',
    fontSize: 40,
  },
})

问题分析

这个问题的根本原因在于 React Native Unistyles 的 Babel 插件无法自动识别开发者是否打算在自定义组件中使用 Unistyles 的功能。Babel 插件在编译时会处理样式转换，但对于自定义封装的组件，它无法确定是否需要应用 Unistyles 的样式处理逻辑。

解决方案

要解决这个问题，我们需要明确告诉 Babel 插件这个自定义组件需要使用 Unistyles 的样式处理。最简单的方法是在组件内部添加一个空的样式声明：

import React from 'react'
import { Text, TextProps } from 'react-native'
import { StyleSheet } from 'react-native-unistyles'

export const AppText = (props: TextProps) => {
  return <Text {...props} style={[styles.textBase, props.style]} />
}

const styles = StyleSheet.create({
  textBase: {} // 空样式声明
})

技术原理

这种解决方案有效的原理是：

1. 通过引入 StyleSheet 并创建样式对象，我们明确告诉 Babel 插件这个组件需要使用 Unistyles 的功能
2. 空的样式声明不会影响实际渲染效果，但确保了样式转换的正确处理
3. 将传入的 props.style 与基础样式合并，保持了样式的优先级顺序

最佳实践

对于需要封装基础组件的场景，建议开发者：

1. 始终在自定义组件中显式引入 Unistyles 的 StyleSheet
2. 即使不需要默认样式，也添加一个空的样式声明
3. 确保正确处理样式合并的顺序，避免样式覆盖问题
4. 考虑为自定义组件添加类型支持，确保类型安全

总结

在 React Native Unistyles 中处理自定义组件的样式传递时，开发者需要明确告知 Babel 插件组件的使用意图。通过添加空样式声明的方式，可以确保样式在 Web 和原生平台上都能正确应用。这种解决方案简单有效，是处理跨平台样式传递问题的推荐做法。