为什么我的可按下组件在第一次点击时显示我的关闭图像，然后按预期工作？

Question

我的目标是展示一个按钮，按下时显示开启状态图像，左键时立即显示关闭状态图像。第一次点击时，按钮显示关闭状态图像，而在所有后续点击中，它按预期显示点击时的开启状态图像。为什么它在第一次点击时显示关闭状态图像？

图片：

  const button_f_on = require('./app_ressources/button_on.png');
  const button_f_off = require('./app_ressources/button_off.png');

带有可按下组件的选项卡：

 const testTab = ({ navigation, route }) => {
    return (
      <View style={styles.container_random}>
        <Pressable
        style={styles.button_f}
        onPress={play}>
        {({ pressed }) => (
          <Image  style={styles.button_f_image} resizeMode='contain' source={pressed ? button_f_on : button_f_off}></Image>
        )}
      </Pressable>

    </View>
    );
  };

样式：

      container_random: {
         backgroundColor:"#fcc938",
         alignContent:'center',
         justifyContent:'center',
         flex:6,
         flexDirection:'column'
      },
      button_f: {
        alignItems:'center',
        justifyContent:'center',
        alignSelf:'center',
        resizeMode:'contain',
        borderRadius:180,
        padding:0,
        flex:3
      },
      button_f_image: {
        width: '90%',
        height: undefined,
        aspectRatio: 1
      }

编辑：我合并了 useState，这很好学！但最终还是由于所用图像的尺寸造成的渲染问题。我将它们缩小了 50%（从 3500px * 3500px 到 1750px * 1750px），问题就消失了。

 const testTab = ({ navigation, route }) => {
    const [pressed , setPressed] = useState(false);
    let d = pressed ? [styles.button_f_image, styles.hidden] : styles.button_f_image
    let d2 = pressed ?  styles.button_f_image : [styles.button_f_image, styles.hidden]
    return (
      <View style={styles.container_random}>

        <Pressable
        style={styles.button_f}
        onPressIn={() => { play(); setPressed(!pressed);}}
        onPressOut={() => { setPressed(!pressed);}}
        >
        <Image  style={[d]} resizeMode='contain' source={button_f_off}></Image>
        <Image  style={[d2]} resizeMode='contain' source={button_f_on}></Image>
      </Pressable>
      
    </View>
    );
  };

Answer 1

const [buttonPressed , setButtonPressed] = useState(false)


<Image source={buttonPressed ? button_f_on : button_f_off} 
onPress={()=> setButtonPressed(!buttonPressed)}/>

为什么我的可按下组件在第一次点击时显示我的关闭图像，然后按预期工作？

Why does my pressable component display my off image on first tap and then works as expected?

javascript

react-native

pressable