如何在反应中重用反应原生样式表（样式）？答案

【问题标题】：How to reuse react-native StyleSheet (styles) in react?如何在反应中重用反应原生样式表（样式）？
【发布时间】：2019-03-05 18:57:44
【问题描述】：

// 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 as is 中重用所有react-native inline-styles。

【问题讨论】：

您的意思是要重用这个样式对象吗？
感谢您的评论，问题已编辑
谢谢。回答你的问题，看看

标签： css reactjs react-native

【解决方案1】：

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

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

<View style={[styles.container, styles.newComponent]}> 
</View>

【讨论】：

styles 将如何在反应中被重用？如何在 react-native 中使用它 - 很清楚
为问题添加了更多解释
你的意思是如何使用其他文件中的样式？
我们有两个独立的项目：一个 react 和 react-native。不同的项目、目录、构建等等。问题：如何在两者中使用相同的style。

【解决方案2】：

您可以做的是将所有样式存储在某个文件 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>
    )
  }
}

希望对你有帮助

【讨论】：

问题更深一点：默认情况下，在 React 中不可能使用 react-native StyleSheet。
我更新了我的答案，因为我更好地理解了这个问题。希望这会有所帮助
是的，我真的知道在反应中使用 RN 的 所有样式 的可能性，我认为问题是关于这个的，需要再编辑一次。
现在我无法理解如何使用emotion.js 重用样式，您能否添加一些示例？
我通过使用emotion.js 的示例更新了我的答案

【解决方案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'
    }
});

【讨论】：