使用 let 更改视图的不透明度

Question

我正在使用 React Native 并对其进行设置，以便当触摸到可触摸不透明度时，另一个可触摸不透明度更改的不透明度，并且触摸的可触摸不透明度具有更高的不透明度。寻找如何修复或改进建议。

let opacityEnglish= true ? 1 : 0.5
let opacitySpanish = false ? 1 : 0.5
const languageSetHandler = (language) => {
if(language == 'English') {
opacityEnglish = true;
opacitySpanish = false;
}
else if (language== 'Spanish') {
opacitySpanish = true;
opacityEnglish = false;
}
setLanguage(language);
}
<TouchableOpacity 
style={styles.OtherStyles, {opacity: opacityEnglish}} onPress={() => languageSetHandler('English')}>
<Text>English</Text>
<Text>Has been selected</Text>
</TouchableOpacity>

有人建议不要对 let 使用布尔值。有什么替代方法可以从触摸不透明度之外更改不透明度吗？

Answer 1

opacityEnglish和opacitySpanish是实例变量。您的languageSetHandler函数会更改实例变量，但当实例变量更改时React不会做出反应。

我认为您在这里有 2 个选择。

1. 您可以直接使用language来表示不透明度，

const languageSetHandler = (language) => {
setLanguage(language);
}
<TouchableOpacity 
style={styles.OtherStyles, {opacity: language === 'English' ? 1 : 0.5}} 
onPress={() => languageSetHandler('English')}
>
<Text>English</Text>
<Text>Has been selected</Text>
</TouchableOpacity>

你可以对Spanish做同样的事情。

2. 您可以在状态中保持不透明度，

const [opacityEnglish, setOpacityEnglish] = useState(0.5); //You can set initial opacity to 1 as per your need
const [opacitySpanish, setOpacitySpanish] = useState(0.5);
const languageSetHandler = (language) => {
if(language == 'English') {
setOpacityEnglish(1);
setOpacitySpanish(0.5);
}
else if (language== 'Spanish') {
setOpacityEnglish(0.5);
setOpacitySpanish(1);
}
setLanguage(language);
}
<TouchableOpacity 
style={styles.OtherStyles, {opacity: opacityEnglish}} 
onPress={() => languageSetHandler('English')}
>
<Text>English</Text>
<Text>Has been selected</Text>
</TouchableOpacity>

Answer 2

let opacityEnglish= true ? 1 : 0.5

这将始终解析为 1，因为true始终为真。

我认为你想要更多的东西：

let opacity = language === 'english' ? 1 : 0.5;