使用全局样式定义 underlineColorAndroid prop

Question

我有一个用于定义全局样式的文件。我想在文件中定义一个常量以用于 underlineColorAndroid 属性。

我的全局样式表如下所示：

const React = require('react-native')

const { StyleSheet } = React

const underlineColorAndroid = '#F86C51'

module.exports = StyleSheet.create({

  background: {
    backgroundColor: '#F5FCFF',
  },

})

我这样导入文件：

import globalStyles from '../styles/global'

我在道具中使用这样的样式：

underlineColorAndroid={globalStyles.underlineColorAndroid}

这行不通，有什么办法可以做到这一点吗？

Answer 1

您可以使用 ES6 export statements 来定义默认导出和命名导出，而不是使用 module.exports 语法：

export const underlineColorAndroid = '#F86C51'

export default StyleSheet.create({
  background: {
    backgroundColor: '#F5FCFF',
  },
})

默认导出可以像以前一样导入：

import globalStyles from '../styles/global';

可以使用花括号导入命名导出来表示解构：

import { underlineColorAndroid } from '../styles/global';

或两者同时：

import globalStyles, { underlineColorAndroid } from '../styles/global';

但是，为了清楚起见，最好将样式 sheet 和命名变量拆分到不同的文件中。

使用全局样式定义 underlineColorAndroid prop

Using global style to define underlineColorAndroid prop

react-native

react-native-android