首页 > 解决方案 > 在 React Navigation MaterialTopTabNavigator (v5) 中动态更新 swipeEnabled 属性

问题描述

我目前正在努力动态更新@react-navigation/material-top-tabsv5 中的 swipeEnabled 道具。我尝试过的是拥有一个全局状态,它指示标签是否应该是可滑动的。该isSwipeable值正在从 TabNavigator 的屏幕中更新。在这种情况下,当按下 LineChart 时。我的代码:

const { isSwipeable } = useContext(GlobalContext)

 return (
    <TopTab.Navigator swipeEnabled={isSwipeable} tabBar={(props) => <TabBar {...props} />}>
         <TopTab.Screen
             name="Screen1"
             component={Screen1Component}
             options={{
                 tabBarLabel: 'Screen1',
                 tabBarIcon: () => null
             }}
         />
        <TopTab.Screen
            name="Screen2"
            component={Screen2Component}
            options={{
                tabBarLabel: 'Screen2',
                tabBarIcon: () => null
            }}
        />
    </TopTab.Navigator>
)

但这不会动态更新swipeEnabledTab Navigator 的 prop。

我也尝试过在标签屏幕中使用类似的东西:

 React.useLayoutEffect(() => {
    
    navigation.setOptions({})
}, [navigation])

但是在这里setOptions我只能更改 tabLabel、tabIcon 等,这对我没有多大帮助。

标签: react-nativereact-native-navigationreact-navigation-v5

解决方案


推荐阅读