useState 重新渲染组件（单击按钮时）。我需要在这种情况发生之前将组件的背景更改为红色 1 秒

Question

当用户单击更新状态的按钮时，我只需将背景显示为红色一秒钟。一旦状态更新，显示的值就会改变。因此，在此发生之前，我需要在状态更改之前将背景更改为特定颜色（绿色/红色/蓝色），但仅持续一秒钟。我尝试使用 setTimeOut() 但可能没有正确使用它

 const [rightOptionBgColor1, setRightOptionBgColor1] = useState('#95d4ed');

async function onPressOptionRight1()  {       
        setRightOptionBgColor1('green');
      
        
    };

   <TouchableWithoutFeedback onPress={onPressOptionRight1}>
                        <View style={[styles.twoOptions,  { backgroundColor: rightOptionBgColor1 }]}>
                        
                            <Text style={styles.textStyles} >{rightAns}</Text>
                           
                        </View>

Answer 1

我建议您使用

TouchableWithoutFeedback

组件，而不是

Pressable

。

这里是反应本机文档的链接。

所以这就是你如何使用它：

<Pressable onPress={()=>{ // function to perform task on pressing button}}
           onPressIn={()=>setRightOptionBgColor1('green')} // touch start
           onPressOut={()=>setRightOptionBgColor1('#95d4ed')}// touch end
           style = {style={[styles.twoOptions,  { backgroundColor: rightOptionBgColor1 }]}}> 
  <Text style={styles.textStyles}>rightAns</Text>
</Pressable>

确保该组件直接在您的代码中使用，不要单独制作 它的组成部分，或者它可能会重新渲染。希望这有帮助