在本机反应中全局加载文件

Question

我是原生反应的新手。我想知道是否可以将 CSS、Colors 全局加载到所有组件和屏幕，而不是在每个屏幕中导入。

我有一个可重用的 stylesheet.js 和 colors.js，其中包含所有全局 css 和颜色。 stylesheet.js

'use strict';

import {StyleSheet} from 'react-native';
import colors from './colors';


module.exports = StyleSheet.create({

    container:{
        flex:1,
    },

    alwaysred: {
       color:colors.txt_main,
    },

});

但现在要在组件中使用，我需要在每个组件中导入。 所以我想知道是否有更简单的方法可以将样式表和颜色导入所有屏幕/组件。

我尝试在 index.js 中导入，但是当我尝试访问样式属性时，它说样式未定义 像这样的

Index.js

import { AppRegistry } from 'react-native';
import stylesheet from './app/resources/styles/stylesheet';

import App from './app/App';

AppRegistry.registerComponent('newApp', () => App);

App.js

 <Text style={stylesheet.alwaysred}>
     New stylesheet imported globally
  </Text>

这给出了未定义样式表的错误。 我已经关注这个 Stackoverflow 线程 link 来创建全局样式表

Answer 1

使用global:

global.stylesheet = StyleSheet.create({

    container:{
        flex:1,
    },

    alwaysred: {
       color:colors.txt_main,
    },

});

Answer 2

实现此目的的规范 React 方法是创建您自己的样式化组件。例如，如果您希望应用程序中的所有 Text 元素都是红色的，您可以为其定义自己的组件：

// Text.js
import { Text, StyleSheet } from 'react-native';

const StyledText = ({ style, ...props }) => (
  <Text style={[styles.text, style]} {...props}></Text>
)

const styles = StyleSheet.create({
  text: {
    color: 'red'
  }
});

export default StyledText;

然后您可以在通常使用来自 react-native 的 Text 的地方使用该文本组件：

import Text from 'Text';

这有点冗长，所以人们经常使用 glamorous-native 或 styled-components 之类的库来达到相同的效果。

// glamorous
const MyStyledText = glamorous.text({
  color: 'red'
});

// styled-components
const MyStyledText = styled.Text`
  color: red;
`;