React Native External Stylesheet

问题:

Is there a way in React Native that I can put all of my styles in a single file so it can easily be maintained (from my perspective) like in HTML we have a .css file.

And also I have a module where there are different styles based on a current user.

回答1:

You could simply create a Styles component like so with all your styles...

import { StyleSheet } from "react-native"

export default StyleSheet.create({
   ...
})

Then on any view needing styles, simply require it...

import styles from "./Styles"

回答2:

According to ECMAScript 6, correct way to export your styles would be like this.

style.js

import {StyleSheet} from 'react-native'

export default StyleSheet.create({

container: {
    flex: 1,
    marginTop: 20
},
welcome: {
    textAlign: 'center'
}
});

Then in your main JS file you can import like this.

import styles from './style'

回答3:

Yes you can

• First create a file name style.js and create what ever style you want like the following example:

Style.js

module.exports = {

    "centerRowAligment":{
        flex: 1,
        backgroundColor:"#a22a5f",
        flexDirection: 'row',
        alignItems:"center"
    },
    "centerColumnAligment":{
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column',
        alignItems: 'center'
    }

}

Then in your react file just import it

import styles from './style'

And then use it in the render components

   <View style={styles.centerRowAligment}></View>

This should works fine !

回答4:

You can try my project rn-less.

It isolates your stylesheet from your jsx/js files with less.js.

And I have a VS Code extension for it, with which you can jump between .less files and .js/.jsx files easily.

回答5:

You could add this module to your pipeline, and create a Gulp, or Webpack task to transpile the CSS into JavaScript.

https://github.com/sabeurthabti/react-native-css

In my experience you're best of not using the same CSS for web and react native, because React Native's stylesheets don't actually cascade.

---

Or if you're willing to change your pipeline a little bit, PostCSS, which is a CSS4 to CSS3 transpiler, which supports all the features of SASS, can also be used to transpile, CSS to JavaScript

https://github.com/postcss/postcss-js

回答6:

I agree to @Chris Geirman solution. you can just create stylesSheet as mention above by Chris and import to any view. In case if you want to merge external styleSheet to your individual view/component stylesheet then you can use ES6 new feature Object.assign like so:

styles = require('./StyleSheet');

const viewStyle = Object.assign(styles, StyleSheet.create({ ... }); );

回答7:

This works for me on the latest React:

I have my stylesheet named CoolTextStyle.js (which is in the same directory as my index.ios.js). And it turns out you dont even need the 'StyleSheet' class

module.exports = 
{
  borderRadius:5
}); 

Then in index.ios.js

import React, { Component, PropTypes } from 'react';
import { View, Text, TextInput,TouchableHighlight,StatusBar } from 'react-native';

var cool_text_style = require('./CoolTextStyle');

export default class delme extends Component 
{
  render() 
  {
    return (
  <View>
    <StatusBar hidden={true} />
    <Text>Login</Text>
    <TextInput placeHolder='UserName' style={cool_text_style}></TextInput>
  </View>
)
  }
}


AppRegistry.registerComponent('delme', () => delme);

回答8:

The whole process of defining styles in my JavaScript caused me a lot of confusion when I first moved over to React Native from Ionic so I hope this helps...

Firstly, you've got to understand that React Native is NOT just an application running in a native WebView. Rather than rendering divs and spans your JavaScript is actually producing higher-level, platform-specific components.

Therefore we can't apply the same styling rules (via external .css stylesheets) like you would a hybrid application written using another framework like Ionic. Well not entirely anyway (see below).

Both options mentioned above are valid solutions. Using:

• Separate JavaScript files to make your styles more modular; and
• Using libraries to transpile CSS to React Native StyleSheet objects.

Note on latter option: Libraries like postcss-js won't enable you to use your CSS the way you normally would i.e. styling based on CSS selectors like .class and #id. Styles will still need to be passed through to components via props.