React Native - 根据 api 值更改颜色

Question

我正在制作一个 React Native 项目，基本上，我想根据 api 的值更改样式化的组件背景颜色，但不知道我将如何做到这一点

（我正在使用：React Native、Expo、typescript 和样式组件）

如果API中的 levelRiskMorse 等于“NoRisk”，我希望ContainerRating （这是一个样式化的组件）背景变为绿色

这是 api服务器。json ：

 "allTasks": [
        {          
            "patientName": "PacientOne",
            "taskName": "Walk",
            "executors": "Person3 - Doctor",
            "institutionName": "IntitutionName",
            "generalObservations": "Observations Test",
            "planType": "1588",
            "time": "07:00",
            "risk": true,
            "levelRiskMorse": "NoRisk",
            "levelRiskBarden": "Low"
        }, 

这是假的 API ！

组件本身和 styles.ts：

[...]

const [risk, setRisk] = useState('');

//fetching data

    useEffect(() => {                            
        async function getRiskLevel(){
            const { data } = await api.get('allTasks');
            const response = data.forEach((item: any | undefined) => {
                return item.levelRiskMorse
            })
            setRisk(response);
        }
        getRiskLevel();
           
    }, [])


 return(
<View>
 <ContainerRating> // if levelRiskMorse === "NoRISK" color turn to green
    <Text>Sem Risco</Text>
    <Text>0-24</Text>
 </ContainerRating>                         
</View> 
               
    )
} 

export const ContainerRating = styled.View`
    border-width: 0.6px;
    border-color: ${({theme}) => theme.colors.default_color};
    flex-direction: row; 
    justify-content: space-around;                               
    height: 50px;
    align-items: center;
    margin-top: 2px;
    border-left: unset;
`;

对不起，如果我没有说清楚，我不习惯在这里提问

Answer 1

简单地做类似的事情：

<ContainerRating style={{color: levelRiskMorse==="NoRISK" ? 'green' : defaultColor }}
     <Text>Sem Risco</Text>
     <Text>0-24</Text>
</ContainerRating>

发生了什么？ 我直接在组件中应用样式 object （每个组件都有这个属性）。 levelRiskMorse==="NoRISK"这是一个 if 条件内联。 如果为真，将设置“绿色”，否则为您要使用的默认颜色变量。