css - 如何在react中重用react-native StyleSheet(样式)？

Question

// react-native example
import { StyleSheet, View } from 'react-native';

const styles = {
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  }
}

const stylesRN = StyleSheet.create(styles);

<View style={stylesRN.container}></View>

重用的最佳方式是什么

// inner styles 
{
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
}

在react-native和react中？

我想用伪代码实现什么(或在 React 中重用的另一种方式):

<div style={magicAdapter(styles.container)}>Hello World!</div>

问题:如果没有 magicAdapter，不可能在 React 中按原样重用所有 React-Native 内联样式。

Answer 1

您可以做的是将所有样式存储在某个文件的对象中例如const containerStyles = { borderRadius: 2 }，导出它，然后对于 React Native，使用 StyleSheets javascript 类为您的 div 容器创建样式

import {containerStyles} from '../someFile.js'

const styles = StyleSheets.create({
  container: containerStyles
})

然后，对于 React，您可以使用同一对象执行内联样式，但请注意，并非 StyleSheets 中支持的所有样式都可以用于内联样式，因此，如果您想做等效的操作，可以使用像 emotion 这样的库.js在JS中动态加载CSS

https://github.com/emotion-js/emotion这是一个例子

import {css} from 'emotion'
import {containerStyle} from '../someFile'

const getContainerStyles = css`
  border-radius: ${containerStyle.borderRadius}
`

export default class SomeClass extends Component {
  render() {
    return(
      <div
        style={getContainerStyles}
      >
      </div>
    )
  }
}

希望这有帮助