如何在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 中重用的另一种方式）：

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

问题：如果没有 magicAdapter，不可能在 React 中重用所有的 React-Native 内联样式as is。

Answer 1

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

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

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

那么对于 React，你可以使用同一个对象进行内联样式，但请注意，并非 StyleSheets 支持的所有样式都可以用于内联样式，因此，如果你想做一些等效的事情，可以使用类似在 JS 中动态加载emotion.jsCSS 的库

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>
    )
  }
}

我希望这有帮助