是否可以将 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 以使用该样式 sheet 例如假设您的样式 js 文件名为 phongyewtong.js

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

用法：

<View style = {s.style1} />

Answer 2

在最近的 React 版本 (0.31) 中，我使用了这段代码：

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

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

module.exports = styles;

Answer 3

以下两个 link 都很好地解释了如何将样式移出 'structural' 代码：

基本上（从上面复制代码片段 link #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>

希望对您有所帮助。

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

is it possible to separate var styles = StyleSheet.create from React.component into different script in react native?

javascript

reactjs

react-native