React Native for Web中cursor样式属性报错，如何仅在Web端启用？

报错信息：React Native for Web: Invariant Violation: "cursor" is not a valid style property
场景：使用React Native for Web时，希望在Web端修改光标样式，但由于移动端不存在cursor属性，直接在StyleSheet.create中添加该属性会引发报错。

解决方案 #

方法一：使用Platform.select区分平台 #

直接在样式定义中通过Platform.select仅为Web平台添加cursor属性，移动端会自动忽略该配置：

import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  modalContent: {
    // 通用样式示例
    padding: 16,
    backgroundColor: '#fff',
    ...Platform.select({
      web: {
        cursor: 'pointer'
      }
    })
  }
});

方法二：拆分平台专属样式文件 #

如果存在大量Web专属样式，可拆分样式文件，利用React Native的平台后缀自动加载机制：

1. 创建通用样式文件styles.ts：

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  modalContent: {
    padding: 16,
    backgroundColor: '#fff'
  }
});

2. 创建Web端专属样式文件styles.web.ts：

import { StyleSheet } from 'react-native';
import baseStyles from './styles';

export default StyleSheet.create({
  modalContent: {
    ...baseStyles.modalContent,
    cursor: 'pointer'
  }
});

React Native会自动根据运行平台加载对应文件：移动端加载styles.ts，Web端加载styles.web.ts。

方法三：用StyleSheet.flatten合并平台样式 #

如果需要动态处理样式组合，可使用StyleSheet.flatten结合平台判断：

import { StyleSheet, Platform } from 'react-native';

// 基础通用样式
const baseStyles = StyleSheet.create({
  modalContent: {
    padding: 16,
    backgroundColor: '#fff'
  }
});

// Web端专属样式
const webOnlyStyles = StyleSheet.create({
  modalContent: {
    cursor: 'pointer'
  }
});

// 合并样式
export default StyleSheet.flatten([
  baseStyles.modalContent,
  Platform.OS === 'web' ? webOnlyStyles.modalContent : {}
]);

内容的提问来源于stack exchange，提问作者Ian