如何通过Props修改React Native自定义组件的文本颜色与图片色调

要实现图片色调和文本颜色的自定义，我们可以给MenuItems组件新增两个可传入的属性，用于控制图片和文本的颜色，具体修改如下：

1. 修改MenuItems组件代码 #

给组件添加iconColor和textColor两个props，默认值设为black以兼容原有用法，然后将这两个属性分别应用到Image的tintColor和Text的颜色样式中：

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

export class MenuItems extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true
        };
    }

    render() {
        // 解构新增的颜色props，设置默认值
        let { navigation, listingname, imagesource, iconColor = 'black', textColor = 'black' } = this.props;
        return (
            <View>
                <TouchableOpacity
                    onPress={this.props.onPress}
                    style={[styles.menuStyle]}>
                    <View style={{ flexDirection: 'row' }}>
                        {/* 将iconColor应用到tintColor */}
                        <Image source={imagesource} style={[styles.menuItemIcon, { tintColor: iconColor }]} />
                        {/* 将textColor应用到文本颜色 */}
                        <Text style={[styles.menuTextstyle, { color: textColor }]}>{listingname}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

// 保留你原有样式配置
const styles = StyleSheet.create({
    menuStyle: {
        // 你的原有样式代码
    },
    menuItemIcon: {
        // 你的原有样式代码
        width: 24,
        height: 24,
        marginRight: 12
    },
    menuTextstyle: {
        // 你的原有样式代码
        fontSize: 16
    }
});

export default MenuItems;

2. 修改组件复用代码 #

在使用MenuItems时，传入iconColor和textColor属性，值设为你需要的蓝色（可以用内置颜色名'blue'，也可以用十六进制值如'#007AFF'）：

<MenuItems 
    listingname="Logout"
    onPress={() => {
        this.RBSheet.close();
        this.props.notifyCountrUpdtHndlr(0);
        AuthHelpers.logout(this.props.navigation, true);
    }}
    imagesource={IMAGE.LOGOUT_ICO}
    // 传入蓝色配置
    iconColor="blue"
    textColor="blue"
/>

这样修改后，既满足当前的蓝色需求，后续如果需要其他颜色，只需在复用组件时传入对应颜色值即可，提升了组件的灵活性和复用性。

内容的提问来源于stack exchange，提问作者Aanish