如果带有道具的语句反应原生

Question

对于我的研究项目，我正在开发一个 React Native 项目，但我被卡住了。我想为 Card.js 提供道具“分数”，并且必须根据该分数定义颜色； '透明颜色'。目前，道具从 Home.js 传递到 Card.js，并在此处定义了透明度颜色。这是一种聪明的方式，还是我必须在 Home.js 中这样做？怎么做？

Card.js 的代码如下：

import * as React from 'react';
import { StyleSheet, Text, View, Image, Platform, TouchableOpacity } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native'

const Card = (props) => {
    const navigation = useNavigation();
    Score = props.Score
    
    return(
        <TouchableOpacity onPress={() => navigation.navigate('Brand', {BrandName: props.BrandName, Score:props.Score })}>
            <View style={style.cardStyle}>
                <View style={{flexDirection: 'row'}}>
                    <Image 
                    source={require('../assets/adidas.png')}
                    style={style.imageStyle}
                    />
                    <View style={{paddingTop: '1%', paddingLeft: '5%'}}>
                        <Text style={style.BrandName}>{props.BrandName}</Text>
                        <Text>transparancy:</Text>
                    </View>
                </View>
                <View style={style.transparancyScore}>
                    <View style={style.transparancyBox}>
                        <Text style={style.transparancyText}>{props.Score}%</Text>
                    </View>
                    <MaterialCommunityIcons style={style.arrowStyle}name="chevron-right" size={25}/>
                </View>
            </View>
        </TouchableOpacity>
    );
}
//If statement I was talking about
if (Score <= 100 && Score >= 70) {
    var transparancyColor = '#52D858'
} else if(Score < 70 &&  Score >= 50) {
    var transparancyColor = '#F2B05C'
} else {
    var transparancyColor = '#FAA09E'
} 

export default Card

const style = StyleSheet.create ({
    cardStyle: {
        paddingLeft: '5%',
        paddingTop: '5%',   
        justifyContent: 'space-between',
        flexDirection: 'row'
    },
    imageStyle: {
        resizeMode: 'contain',
        ...Platform.select({
            ios: {                      
                width: 55,
                height: 55,
            },
            android: {
                width: 70,
                height: 70
            }
        })
    },
    BrandName: {
        fontSize: 20,
        paddingBottom: '3%'
    },
    transparancyScore: {
        paddingTop: '7%',
        textAlign: 'center',
        flexDirection: 'row'
    },
    transparancyBox: {
        backgroundColor: '#ffffff',
        height: 20,
        borderRadius: 100,
        width: 50,
        shadowColor: transparancyColor,
        shadowOffset: {
            width: 0,
            height: 12,
        },
        shadowOpacity: 0.58 ,
        shadowRadius: 16,
        elevation: 24,
    },
    transparancyText: {
        color: transparancyColor,
        textAlign: 'center',
        fontSize: 12,
        paddingTop: '3%'
    },
    arrowStyle: {
        paddingLeft: '5%',
        marginRight: '1%'
    }
})

如果有人对此有解决方案或可能的解决方法，请告诉我！

Answer 1

关于代码结构问题，可以，尤其是最初，将 props 向下传递一两层。

就代码而言，类似这样（注意约定是以小写开头的变量名）：

const Card = ({ Score, Brandname }) => {
    const navigation = useNavigation();
    let transparencyColor;

//If statement I was talking about
    if (Score <= 100 && Score >= 70) {
        transparancyColor = '#52D858'
    } else if(Score < 70 &&  Score >= 50) {
        transparancyColor = '#F2B05C'
    } else {
        transparancyColor = '#FAA09E'
    } 
    
    return(
        <TouchableOpacity onPress={() => navigation.navigate('Brand', {BrandName, Score })}>
            <View style={style.cardStyle}>
                <View style={{flexDirection: 'row'}}>
                    <Image 
                    source={require('../assets/adidas.png')}
                    style={style.imageStyle}
                    />
                    <View style={{paddingTop: '1%', paddingLeft: '5%'}}>
                        <Text style={style.BrandName}>{BrandName}</Text>
                        <Text>transparancy:</Text>
                    </View>
                </View>
                <View style={style.transparancyScore}>
                    <View style={StyleSheet.flatten([style.transparancyBox, {backgroundColor: transparencyColor}])}>
                        <Text style={style.transparancyText}>{props.Score}%</Text>
                    </View>
                    <MaterialCommunityIcons style={style.arrowStyle}name="chevron-right" size={25}/>
                </View>
            </View>
        </TouchableOpacity>
    );
}

Answer 2

这样根据分数重新分配，这样使用也没有问题。

let transparancyColor  = '';
//If statement I was talking about
if (Score <= 100 && Score >= 70) {
    transparancyColor = '#52D858'
} else if(Score < 70 &&  Score >= 50) {
    transparancyColor = '#F2B05C'
} else {
    transparancyColor = '#FAA09E'
}