Question

我是新来的本地人。我想知道无论如何都要将CSS，全局颜色加载到所有组件和屏幕，而不是在每个屏幕中导入。

我有一个可重复使用的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,
    },

});

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

我尝试在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;
`;

本地加载文件

2 个答案: