如何通过react native中的函数设置文本颜色以满足UI要求

Question

我目前正在开发一个应用程序，希望根据UI的要求设置文本颜色。我想通过fontStyles.jsb中的一个函数发送颜色，因为对于应用程序中的不同位置，将使用不同的颜色。这是我的fontStyles.js代码：

import {
StyleSheet,
} from 'react-native';
import fonts from './fonts';
export default styles = StyleSheet.create({
heading1: {
fontFamily:fonts.Montserrat,  
fontWeight: 700,
size: 20,
},
heading2: {
fontFamily:fonts.Montserrat,  
fontWeight: 700,
size: 18,
},
heading3: {
fontFamily:fonts.Montserrat,  
fontWeight: 700,
size: 16,
},
text1: {
fontFamily:fonts.Montserrat,  
fontWeight: 500,
size: 15,
},
text2: {
fontFamily:fonts.Montserrat,  
fontWeight: 500,
size: 14,
},
text3: {
fontFamily:fonts.Montserrat,  
fontWeight: 500,
size: 13,
},
text4: {
fontFamily:fonts.Montserrat,  
fontWeight: 500,
size: 12,
},
});

这是我的colors.js 代码

export default {
appBackground: '#FBFBFF',
primary: '#F858A5',
secondary: '#FEBBDB',
accent: '#FFE5F2',
black: '#000000',
black1: '#0D0D0D',
black2: '#1A1A1A',
white: '#FFFFFF',
white98: '#FAFAFA',
white96: '#F5F5F5',
secondaryButtons: '#8FC8E3',
navBarInactive: '##D7EAF3',
HeadingText: '##9A9A9A',
};

现在，我想从这里发送文本颜色：

<Text style={fontStyles.text3}>{LoginPage.policy}</Text>

我需要做哪些改变？

Answer 1

第一个导入颜色

import colors from './colors';

然后使用数组将其添加到样式中。该阵列用于在同一组件中应用多种样式

<Text style={[fontStyles.text3,{ color: colors. primary }]}>{LoginPage.policy}</Text>