选项卡切换后将WebView刷新到初始url

Question

我正在创建一个简单的应用程序，用于显示

example.com

商店的内容。该应用程序有 2 个导航按钮（商店和购物篮）。

我使用

Navigation

模板创建了 React Native + Expo 应用程序。我添加了 2 个选项卡（

index.tsx

和

basket.tsx

）。选项卡几乎相同，唯一的区别是

WebView

组件中的源属性（

https://example.com

和

https://example.com/basket

）：

import { StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
import { View } from '@/components/Themed';

export default function IndexScreen() {

  return (
    <View style={styles.container}>
      <WebView
        source={{ uri: 'https://example.com' }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

应用程序和书签按钮工作正常。但是，当我按下购物篮选项卡时，我希望 WebView 始终使用原始 URL (https://example.com/basket) 重新加载。

Answer 1

解决方案是将

unmountOnBlur: true,

添加为选项卡的选项：

      <Tabs.Screen
        name="basket"
        options={{
          title: 'Basket',
          tabBarIcon: ({ color }) => <TabBarIcon name="shopping-cart" color={color} />,
          unmountOnBlur: true,
        }}
      />