React Native中TouchableOpacity跳转后持续激活问题求助

问题场景 #

使用TouchableOpacity作为首页按钮时，多数场景功能正常，但以下两种情况会出现异常：

• 唤起分享弹窗并切换至其他应用后返回
• 通过Linking.openURL打开应用商店评分后返回

异常表现：返回应用后，TouchableOpacity仍处于激活状态（保持点击时的透明度效果），但点击功能本身正常。

原代码示例 #

<TouchableOpacity onPress={()=> shareApp() }>
    <View>
        <Image source={require('../Assets/Home_page/share.png')}/>
    </View>
    <View>
        <Text>Share my app</Text>
    </View>
</TouchableOpacity>

shareApp = async () => {
  var link="https://play.google.com/store/apps/details?id="+_packageid;
  
  const result = await Share.share({
    title: 'App link',
    message:'Best app \n'+link, 
    url:link
  });
}

解决方案 #

方案1：通过AppState监听重置按钮状态

利用AppState监听应用前后台切换，当应用从后台回到前台时，手动重置TouchableOpacity的激活状态：

import { AppState, TouchableOpacity, View, Image, Text } from 'react-native';
import { useRef, useEffect, useState } from 'react';
import { Share } from 'react-native';

const HomeScreen = () => {
  const shareBtnRef = useRef(null);
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const subscription = AppState.addEventListener('change', nextAppState => {
      // 应用从后台回到前台时重置按钮状态
      if (appState.match(/inactive|background/) && nextAppState === 'active') {
        shareBtnRef.current?.blur();
      }
      setAppState(nextAppState);
    });

    return () => subscription.remove();
  }, [appState]);

  const shareApp = async () => {
    const link = `https://play.google.com/store/apps/details?id=${_packageid}`;
    await Share.share({
      title: 'App link',
      message: `Best app \n${link}`, 
      url: link
    });
  };

  return (
    <TouchableOpacity 
      ref={shareBtnRef}
      onPress={() => shareApp()}
    >
      <View>
        <Image source={require('../Assets/Home_page/share.png')}/>
      </View>
      <View>
        <Text>Share my app</Text>
      </View>
    </TouchableOpacity>
  );
};

方案2：替换为Pressable组件

Pressable组件对状态管理更稳定，会自动处理应用前后台切换时的状态重置，同时可自定义按压效果：

import { Pressable, View, Image, Text, StyleSheet } from 'react-native';
import { Share } from 'react-native';

const HomeScreen = () => {
  const shareApp = async () => {
    const link = `https://play.google.com/store/apps/details?id=${_packageid}`;
    await Share.share({
      title: 'App link',
      message: `Best app \n${link}`, 
      url: link
    });
  };

  return (
    <Pressable 
      onPress={() => shareApp()}
      style={({ pressed }) => [
        styles.btnContainer,
        pressed && styles.pressedStyle
      ]}
    >
      <View>
        <Image source={require('../Assets/Home_page/share.png')}/>
      </View>
      <View>
        <Text>Share my app</Text>
      </View>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  btnContainer: {
    // 原TouchableOpacity的样式
  },
  pressedStyle: {
    opacity: 0.5 // 模拟TouchableOpacity的activeOpacity效果
  }
});

方案3：异步操作完成后手动重置

在Share.share或Linking.openURL的异步操作完成后（无论成功/取消），直接重置按钮状态：

const shareBtnRef = useRef(null);

const shareApp = async () => {
  const link = `https://play.google.com/store/apps/details?id=${_packageid}`;
  try {
    await Share.share({
      title: 'App link',
      message: `Best app \n${link}`, 
      url: link
    });
  } finally {
    // 无论操作结果如何，重置按钮状态
    shareBtnRef.current?.blur();
  }
};

// Linking.openURL场景同理
const openStore = async () => {
  const link = `https://play.google.com/store/apps/details?id=${_packageid}`;
  try {
    await Linking.openURL(link);
  } finally {
    shareBtnRef.current?.blur();
  }
};

问题原因 #

TouchableOpacity的激活状态依赖UI线程的事件循环，当应用切换到后台时UI线程暂停，返回前台后未自动触发状态重置，导致视觉上保持激活效果。

内容的提问来源于stack exchange，提问作者Merbin Joe