是否有可能從React.component中將var styles = StyleSheet.create分隔成反應本機中的不同腳本？

Question

是否有可能從React.component中將var styles = StyleSheet.create分隔成反應本機中的不同腳本？

Answer 1

這是可能的。只需創建一個js文件中使用此模式：

'use strict'; 

var React = require('react-native'); 

var myStyles = React.StyleSheet.create({ 
    style1: { }, 
    style2: { } 
)} 

module.exports = myStyles; 

在組件JS使用

則需要對例如使用樣式表假設你的風格的js文件名爲phongyewtong.js

var s = require('../the/path/to/phongyewtong'); 

用法：

<View style = {s.style1} /> 

Answer 2

在最近的版本做出反應（0.31）我用這個代碼：

import React, { Component, PropTypes } from 'react'; 
import { StyleSheet } from 'react-native'; 

var styles = StyleSheet.create({ 
    ... 
}); 

module.exports = styles; 

Answer 3

兩者的下面的鏈接很好地解釋瞭如何將樣式移出「結構」代碼：

1. https://hackernoon.com/manage-react-native-project-folder-structure-and-simplify-the-code-c98da77ef792
2. https://medium.com/the-react-native-log/tips-for-styling-your-react-native-apps-3f61608655eb

基本上（從上面的鏈接＃2複製的代碼片段）是在獨立的JS你的風格，說text.js文件：

const text = StyleSheet.create({ 
    p: { 
     color: 'black', 
     fontFamily: 'Open Sans', 
     fontSize: 14, 
    }, 
    title: { 
     fontWeight: 'bold', 
     color: 'black', 
     fontFamily: 'Open Sans', 
     fontSize: 20, 
    } 
    }); 

export default text; 

在陣營組件，可以只需導入這個文本樣式，並用它直接

<Text style={text.p}>settings</Text> 

希望這有助於。