如何 reset/rerender 筛选你刚刚离开的反应导航

Question

所以，正如标题所说，我正在制作一个 React 本机应用程序，我希望 navigation.navigate() 离开的屏幕在我返回时被“重置”或“重新渲染” ，因为就像现在一样，当我离开屏幕然后再回到它时，它的状态与我离开时的状态相同。这是导航器代码

const Tab = createBottomTabNavigator();

export default function App() {

  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Group>
        <Tab.Screen name="Devices" component={Devices} options={{
          tabBarIcon:({focused})=>(
            <View style={{alignItems:'center', justifyContent:'center'}}>
              <Image
                source={require('./android/app/src/main/assets/devices.png')}
                resizeMode='contain'
                style={{
                  width: 30,
                  height: 30
                }}
              />
            </View>
          )
        }} />
        <Tab.Screen name="Connection" component={ConnectionScreen} options={{
          tabBarIcon:({focused})=>(
            <View style={{alignItems:'center', justifyContent:'center'}}>
              <Image
                source={require('./android/app/src/main/assets/connection.png')}
                resizeMode='contain'
                style={{
                  width: 30,
                  height: 30
                }}
              />
            </View>
          )
        }} />
        </Tab.Group>
        <Tab.Group screenOptions={{ presentation: 'modal' }}>
          <Tab.Screen name='Add device' component={AddDevice}
          options={{   
            tabBarButton: () => null,
            tabBarVisible:false
          }}/>
        </Tab.Group>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

第二个较小的事情是，我看不到任何导航动画，例如底部的模态框

Answer 1

您可以使用 useIsFocused，尝试类似的方法：

import { useIsFocused } from '@react-navigation/native';

  const isFocused = useIsFocused();

useEffect(() => {
    //executes whenever this component/screen is focused
  }, [isFocused]);

您还可以将 unmountOnBlur 标志设置为 true 到特定屏幕，如下所示：

<Tab.Screen
    name={...}
    component={...}
    options={{unmountOnBlur: true}}
/>

Answer 2

将unmountOnBlur设置为true

Unmounting a screen resets any local state in the screen as well as the state of the nested navigators in the screen. Defaults to false.

<Tab.Navigator
  screenOptions={{ unmountOnBlur: true }}
>
...
</Tab.Navigator>

此外，您可以将其应用于单个路线：

<Tab.Navigator>
  <Tab.Screen name="..." component={...} options={{ unmountOnBlur: true }} />
</Tab.Navigator>

如何 reset/rerender 筛选你刚刚离开的反应导航

How to reset/rerender screen you just left with react navigation

javascript

react-native

react-navigation