是否有可能将var styles = StyleSheet.create从React.component分离到反应原生的不同脚本？

Question

是否可以将var styles = StyleSheet.create从React.component分离到react native中的不同脚本？

Answer 1

这是可能的。只需使用以下模式创建一个js文件：

'use strict';

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

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

module.exports = myStyles;

然后在你的组件js中使用require来使用该样式表，例如假设您的样式js文件名为phongyewtong.js

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

用法：

<View style = {s.style1} />

Answer 2

以下两个链接都很好地解释了如何从“结构”代码中移出样式：

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;

在React组件中，您只需导入此文本样式，然后直接使用

即可

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

希望这有帮助。

Answer 3

在最新的React版本（0.31）中，我使用了这段代码：

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

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

module.exports = styles;