Question

是否可以在样式表上添加全局变量像这样：

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: ´$myglobalvar’
  },
  red: {
    color: 'red'
  },
});

由于

Answer 1

是的，这是可行的，并且建议的模式可以在您的应用中实现一致的设计。

您可以在文件中定义样式，其中样式表的位置如下：

import React, {Component} from 'react';
import {
StyleSheet,
Text
} from 'react-native';

const defaultFontSize = 16;

class MyTextComponent extends Component {
  render(){
    return (
      <Text style={styles.bigblue}>Test</Text>
    )
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: defaultFontSize
  }
});

您可以使用中央文件来设置常量，如下所示：

DesignConstants.js

const DesignConstants = {
  "DEFAULT_FONT_SIZE": 16
}

module.exports = DesignConstants;

MyTextComponent.js

import React, {Component} from 'react';
import {
StyleSheet,
Text
} from 'react-native';
import DesignConstants from './DesignConstants'

class MyTextComponent extends Component {
  render(){
    return (
      <Text style={styles.bigblue}>Test</Text>
    )
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: DesignConstants.DEFAULT_FONT_SIZE
  }
});

如果您的应用变大，我肯定会推荐第二种可能性。

在stylesheer上反应原生var

1 个答案: