React Native 全局样式

Question

我是 React 的新手，我了解基于组件的内联样式的好处。但我想知道是否有一种体面的方式来拥有某种全球风格。例如，我想在整个应用程序中使用相同的文本和按钮着色。

而不是在每个组件中重复（如果需要，随后必须在 x 处更改它），我最初的想法是在它自己的文件中创建一个 'base' StyleSheet class 并导入它在我的组件中。

是否有更好或更多的'React'方法？

Answer 1

您可以创建可重复使用的样式表。示例：

style.js

'use strict';
import { StyleSheet } from 'react-native';

module.exports = StyleSheet.create({
    alwaysred: {
        backgroundColor: 'red',
        height: 100,
        width: 100,
    },
});

在你的组件中：

const s = require('./style');

...然后：

<View style={s.alwaysred} ></View>

Answer 2

您也可以尝试 react-native-extended-stylesheet 支持全局样式变量：

// app.js
EStyleSheet.build({
   buttonColor: 'green'
});

// component.js
var styles = EStyleSheet.create({
  button: {
    backgroundColor: '$buttonColor',
    ...
  }
});

Answer 3

试试我的库 react-native-style-tachyons，它不仅为您提供全局样式，而且还提供设计优先的响应式布局系统，其宽度和高度相对于您的根字体大小。

Answer 4

为您的样式创建一个文件（即 Style.js）。

这是一个例子：

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1
  },
  welcome: {
    fontSize: 20
  }
});

在您要使用您的样式的任何文件中，添加以下内容：

import styles from './Style'

Answer 5

如果你只是想设置一些全局变量，你可以试试。

AppStyles.js

export default AppStyles = {
    colour: {
        background: '#f4f9fd',
        font: '#434e5a',
        primary: '#ff3b30'
    }
}

index.ios.js

import AppStyles from './AppStyles';

const styles = StyleSheet.create({
    container: {
        backgroundColor: AppStyles.colour.background
    }
});

Answer 6

看看 Shoutem Themes 的 React Native。

以下是 Shoutem 主题：

全局样式，其中某些样式通过其样式名称自动应用于组件：

const theme = {
  'my.app.ComponentStyleName': {
    backgroundColor: 'navy',
  },
};

使用 styleName 激活特定组件的样式（如 CSS class）：

const theme = {
  'my.app.ComponentStyleName': {
    '.rounded': {
      borderRadius: 20,
    },
    backgroundColor: 'navy',
  },
};

// Implementation - will apply borderRadius to Component
<Component styleName="rounded"/>

自动样式继承：

const theme = {
  'my.app.ComponentStyleName': {
    'my.app.ChildComponentStyleName': {
      backgroundColor: 'red',
    },
    '.rounded': {
      borderRadius: 20,
    },
    backgroundColor: 'navy',
  },
};

// Implementation - will apply red background color to ChildComponent
<Component styleName="rounded">
  <ChildComponent/>
</Component>

组合组件的嵌套样式：

const theme = {
  'my.app.ComponentStyleName': {
    containerView: {
      paddingTop: 10,
    },
    innerView: {
      backgroundColor: 'yellow',
    },
  },
};

// Of course do not forget to connect Component
function Component({ style }) {
  return (
   <View style={style.containerView}>
    <View style={style.innerView}>
     <Text>Warning with yellow background.</Text>
    </View>
   </View>
  );
}

要让它工作，您需要使用 StyleProvider，包装器组件，它通过上下文为所有其他组件提供样式。类似于 Redux StoreProvider。

您还需要使用 connectStyle 将您的组件连接到样式，以便您始终使用连接的组件。类似于 Redux connect.

export const styledComponent = connectStyle('my.app.ComponentStyleName',
                                { ...defaultStyleIfAny })(Component);

您可以在文档中查看示例。

最后一件事，我们还在 UI ToolKit 中提供了一组组件，这些组件已经连接到样式，因此您只需将它们和样式导入全局 style/theme.

Answer 7

你必须创建一个文件来存储所有样式，如'styles.js'，并根据需要编写css类型代码

'use strict';
import {StyleSheet} from 'react-native';

export default StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    title: {
        fontSize: 10,
        color: '#000',
        backgroundColor: '#fff'
    },

    button: {
        fontSize: 12,
        color: '#000',
        backgroundColor: '#fff'
    }

});

现在您可以使用全局样式了

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import StyleSheet from './config/styles';

export default class App extends Component {

  render() {
    return (
      <View
        style={StyleSheet.container}>
        <Button
          style={StyleSheet.button}
          title="Go to Lucy's profile"
        />
      </View>
    );
  }
}

Answer 8

外部 CSS 文件 main.css

'use strict';

var {
   StyleSheet,
 } = 'react-native';

module.exports = StyleSheet.create({

  main: {
     backgroundColor: 'gray',
     height: 20,
     width: 100,
  }
});

在组件中创建 css 文件的实例。

var mainCss = require('./main');

<View style={mainCss.main}><Text>Hello</Text></View>

Answer 9

所有这些方法都直接回答了这个问题，但就我而言，这不是在像 React 这样基于组件的设计系统中做到这一点的方法。

我们可以从原子组件开始，然后对它们进行分层和分组，一直到顶部。下面的文章可能会让这个思路更加清晰： http://atomicdesign.bradfrost.com/chapter-2/

In the natural world, atomic elements combine together to form molecules. These molecules can combine further to form relatively complex organisms.

如果您需要一个不存在的基础组件，您可以自己制作。然后你可以用它制作其他不太具体的组件。例如：

// rerender is cheaper without style prop when
// the default style is an unchanged reference
// instead of a new object every time.
const style = {
  color   : 'MidnightBlue',
  fontSize: 14,
}

function getStyle (styleProp) {
  // styleProp is able to overwrite style
  if (styleProp) return {...style, ...styleProp}
  else return style
}

export default function CustomText (props) {
  return (
    <Text style={getStyle(props.style)}>
      {props.children}
    </Text>
  )
}

然后到处使用CustomText而不是Text。您也可以使用 View、div、span 或其他任何方式。

Answer 10

在这里您可以找到一种优雅的方式来对您的样式进行排序，然后导入到不同的组件中，您可以创建一个文件夹，在其中收集所有样式文件并创建 index.js 这将起作用作为门面：

index.js 看起来像：

import Variables from './variables';
import GlobalStyles from './global'; 

export { Variables, GlobalStyles };

然后像这样导入：

import { GlobalStyles } from './stylesheets/index';

这里有更多信息：

https://thoughtbot.com/blog/structure-for-styling-in-react-native

Answer 11

我用类似的方法让我的工作正常

创建名为 'constants' 的目录在 ./constants/AppStyles.js

中创建一个文件

 /**
 * Project level stylesheet for common styles
 */


import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    margin: 20,
    alignItems: 'center',
    alignContent: 'center',
    paddingVertical: 60
  }
  
});

然后在 App.js 中引用此文件和创建的样式。

import React from 'react';
import {
  View,
  Text
} from 'react-native';
import AppStyles from './constants/AppStyles';

const App = () => {
  return (
    <View style={ AppStyles.container }>
      <Text>MOST BASIC Template EVER!</Text>
    </View>
  );
};

export default App;

我掉进的陷阱

我用花括号将 import {AppStyles} from './constants/AppStyles';错误:-(
我将 AppStyles 创建为一个组件并尝试导出一个 const 错误 :-)

在网上找到一门很好的课程并从那里弄明白

Answer 12

更好的解决方案是使用 global 对象并创建一个单独的 theme 文件。

将该文件导入到根文件中。

import theme from './theme'
global.theme = theme

那么项目中任意位置的任意组件都可以使用如下

<Text style={global.theme.text} > Whosebug Answer </Text>

这样，我们就不用一次又一次导入主样式文件了。主题可以通过一个文件进行管理

React Native 全局样式

React Native global styles

react-native