在React Native中全局加载文件

Question

i am new to react native. I was wondering is there anyway to load CSS,Colors globally to all components and screens rather then importing in each screen.

I have one reusable stylesheet.js and colors.js which contain all global css and colors. 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,
    },

});

But now to use in components i need to import in every component. So i was wondering if there is more easy way to import the stylesheet and colors to all scrrens/components.

I tried to importing in index.js ,but then when i tried to access style property it saying style undefined Something like this

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>

This giving error saying undefined stylesheet. I have folloed this Stackoverflow thread link to create global stylesheet

Answer 1

Use global :

global.stylesheet = StyleSheet.create({

    container:{
        flex:1,
    },

    alwaysred: {
       color:colors.txt_main,
    },

});

Answer 2

The canonical React way of achieving this is creating your own styled, components. For example, if you wanted all the Text elements in your application to be red, you can define your own component for it:

// 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;

And then you can use that text component where you'd normally use Text from react-native:

import Text from 'Text';

This is a little verbose, so often people use libraries like glamorous-native or styled-components to achieve the same effect.

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

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