如何实现React与React Native的CSS共享？能否统一用内联样式复用两项目代码？

核心探索目标 #

• 核心解决的问题：如何在React/Next.js Web项目与React Native移动端项目之间实现CSS样式的跨项目共享，减少重复开发工作量
• 具体探索方向：
  • 是否可以在Web端React/Next.js应用中，直接采用React Native风格的内联样式、StyleSheet.create写法，实现两端代码逻辑完全统一
  • 这种统一写法能否替代Web端传统的独立CSS文件开发模式

两类开发模式的典型写法示例 #

React Native端原生StyleSheet写法 #

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

const vw = Dimensions.get('window').width / 100;

export const styles = StyleSheet.create({
  container: {
    paddingTop: 0,
    width: '100%',
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 'auto',
    marginRight: 'auto',
    fontFamily: 'Rubik',
  },
  tableSection: {
    width: '100%',
    marginBottom: 0,
    fontFamily: 'Rubik-Bold',
  },
})

Web端传统独立CSS文件写法 #

.eventOptionTitle {
  word-wrap: break-word;
  text-overflow: ellipsis;
}

.starList {
  list-style-type: none;
  padding-left: 0;
}

方案可行性与边界说明 #

• 可行性层面：上述统一写法完全可以在Web端落地，成熟的跨端适配层可以直接解析RN定义的StyleSheet样式对象，将其转换为Web兼容的CSS规则，Web端不需要单独编写重复的CSS文件，真正实现一份样式代码双端复用。
• 实际落地的注意事项：
  • 不是所有RN样式属性都能1:1映射到Web端，部分Native专属的样式能力（比如原生阴影、触摸反馈样式），在Web端会通过适配层做兼容降级
  • Web端独有的CSS特性（比如示例中的文本截断、列表样式配置），需要在跨端样式对象中做语法适配，才能被统一的跨端写法复用
• 适用场景边界：这种统一写法更适合公共组件占比高、双端样式一致性要求高的项目；如果项目需要大量开发复杂CSS动画、响应式媒体查询逻辑，传统独立CSS文件的开发效率依然具备优势

内容的提问来源于stack exchange，提问作者János