React Native Native Stylesheet

Question

React Native有沒有一種方法可以將我所有的樣式放在單個文件中，以便可以很容易地維護（從我的角度來看），就像在HTML中一樣，我們有一個.css文件。

而且我還有一個模塊，其中有基於當前用戶的不同風格。

Answer 1

您可以將此模塊添加到您的管道中，並創建一個Gulp或Webpack任務以將CSS轉換爲JavaScript。

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

在我的經驗，你最好不要使用網頁相同的CSS和反應本土的，因爲本土作出反應的樣式表實際上並不級聯。

---

或者，如果你願意改變你的管道一點點，PostCSS，這是一個CSS4到CSS3 transpiler，支持SASS的所有功能外，還可以用來transpile，CSS與JavaScript

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

Answer 2

你可以簡單地創建一個樣式組件，像這樣用你的風格......

'use strict' 
const React = require('react-native'); 
const { Stylesheet } = React; 

module.exports = Stylesheet.create({ 
    ... 
}); 

然後在任何視圖需要的款式，只要求它...

styles = require('./Styles'); 

Answer 3

我同意@克里斯Geirman解決方案。你可以像Chris上面提到的那樣創建stylesSheet並導入到任何視圖。如果你想將外部styleSheet合併到你的單個視圖/組件樣式表中，那麼你可以像這樣使用ES6的新特性Object.assign：

styles = require（'./ StyleSheet'）; （樣式，StyleSheet.create（{... }）; ）;以及其中，

Answer 4

在我的JavaScript定義樣式的整個過程給我帶來了很多困惑，當我第一次移到反應離子從本地，所以我希望這可以幫助...

首先，你要明白， React Native是而不是只是運行在本機WebView中的應用程序。而不是渲染div和跨越你的JavaScript實際上正在生產更高層次，特定於平臺的組件。

因此，我們不能像使用Ionic等其他框架編寫混合應用程序一樣應用相同的樣式規則（通過外部.css樣式表）。好吧，不完全是（見下文）。

上面提到的兩個選項都是有效的解決方案。使用：

• 單獨的JavaScript文件使您的樣式更加模塊化;和
• 使用庫將CSS轉換爲React Native StyleSheet對象。

注意對後一種選擇：圖書館像postcss-JS不會讓你使用你的CSS，你通常會即樣式基於CSS選擇喜歡的.class和#ID的方式。樣式仍然需要通過道具傳遞給組件。

Answer 5

這對我的作品在最新的陣營：

我有我的樣式表命名CoolTextStyle.js（這是在同一個目錄中我index.ios.js）。而事實證明，你甚至不需要的「樣式表」級

module.exports = 
{ 
    borderRadius:5 
}); 

然後在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); 

Answer 6

是的，你可以

• 首先創建一個文件名的風格。 js並創建你想要的樣式 想要如下例子：

個Style.js

module.exports = { 

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

} 

然後在你的反應只是文件將其導入

import styles from './style' 

然後在渲染組件

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

這應該工作正常使用它！

Answer 7

根據ECMAScript 6，導出樣式的正確方法就是這樣。

style.js

import React, {StyleSheet} from 'react-native' 

export default StyleSheet.create({ 

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

然後在你的主JS文件，你可以導入這樣。

import styles from './style' 

Answer 8

您可以試試我的項目rn-less。

它使用less.js將您的樣式表從jsx/js文件中分離出來。

而我有一個VS Code extension它，您可以輕鬆地在.less文件和.js/.jsx文件之間跳轉。