如何在 React 和 React Native 之间共享 CSS？

Question

我们是否也可以在 React / Next.js 应用程序中使用内联 CSS 样式来统一两个项目之间的代码？

像这样？

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',
  },
...

而不是：

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

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

Answer 1

我建议研究 react-native-web 以了解正确的代码重用，因为它允许使用完全相同的 StyleSheet 对象。直接与常规 React 网络应用共享 CSS 一定很棘手，因为支持的 CSS 规则集、弹性行为等存在差异

如何在 React 和 React Native 之间共享 CSS？

How to share CSS between React and React Native?

css

shared-libraries

reactjs

react-native

next.js