如何在 React Native 中为自定义组件的 2 个不同导入设置不同的文本颜色

Question

我在更改自定义组件的一些特定导入的文本颜色时遇到问题。

当我导入按钮时，我可以通过更改使用它的道具的值来更改按钮本身的边框颜色和背景颜色，具体取决于它的用途。但是我不知道如何对文本做同样的事情。我想这是微不足道的事情，但我们将不胜感激。

下面的代码是按钮的代码。

import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import colors from '../config/colors';


function AppButton({title, onPress, color = "primary", borderColor}) {
    return (
        <TouchableOpacity style={[
            styles.button, 
            {backgroundColor: colors[color], borderColor: colors[borderColor] }]} 
            onPress={onPress}
        >
            <Text style={[styles.text]}>{title}</Text>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    button:{
        backgroundColor: colors.primary,
        borderRadius:15,
        padding: 15,
        width: "100%",
        marginVertical: 10,
        justifiedContent: 'center',
        alignItems: 'center',
        borderWidth: 6,
    },
    text:{
        color: colors.white,
        fontSize: 18,
        textTransform: 'uppercase',
        fontWeight: 'bold',
    }
})

export default AppButton;

Answer 1

从您的评论来看，似乎对它的工作原理存在误解。我有 created a little snack 展示你需要的东西。

这里是完整的代码。我创建了两个按钮。一个使用默认的文本颜色，另一个使用我们通过道具提供的不同颜色。

import React from 'react';
import {TouchableOpacity, Text, View, StyleSheet} from 'react-native'

function AppButton({title, onPress, color = "blue", borderColor, textColor}) {
    return (
        <TouchableOpacity style={[
            styles.button, 
            {backgroundColor: color, borderColor: borderColor }]} 
            onPress={onPress}
        >
            <Text style={[styles.text, textColor && {color: textColor}]}>{title}</Text>
        </TouchableOpacity>
    );
}

export default function App() {
  return (
    <View style={{margin: 60}}>
      <AppButton textColor="red" title="TestButton" onPress={() => console.log("Hello World")} borderColor="yellow" />
      <AppButton title="TestButton" onPress={() => console.log("Hello World")} borderColor="yellow" />
    </View>
  );
}

const styles = StyleSheet.create({
    button:{
        backgroundColor: "red",
        borderRadius:15,
        padding: 15,
        width: "100%",
        marginVertical: 10,
        justifiedContent: 'center',
        alignItems: 'center',
        borderWidth: 6,
    },
    text:{
        color: "white",
        fontSize: 18,
        textTransform: 'uppercase',
        fontWeight: 'bold',
    }
})

第一个文本颜色为红色，第二个文本颜色为白色。

这是结果。

如何在 React Native 中为自定义组件的 2 个不同导入设置不同的文本颜色

How to have different text colour for 2 different imports of a custom component in React Native

javascript

reactjs

react-native