如何在 react 中重用 react-native 样式表(样式)?

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，就不可能在 reactas is中重用所有 act-native 内联样式。

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 中支持的所有样式都可用于内联样式，所以如果你想做一些等效的事情，有像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>
)
}
}

我希望这有帮助

Answer 2

您可以将新组件的样式与容器的样式连接起来，如下所示

const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
newComponent:{
// New component style
}
});
<View style={[styles.container, styles.newComponent]}> 
</View>

Answer 3

// your component file name  (button.js) 
import React, { Component } from 'react';
// import the style from another file present in the same directory
import styles from 'button.style.js'; 
// you can reuse this style in another component also
class Button extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.buttonText}> Press Me! </Text>
</View>
);
}
}
export default Button;
// your style file  name ( "button.style.js")
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
padding: 10,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#43a1c9',
},
buttonText: {
fontSize: 20,
textAlign: 'center'
}
});