如何使用React Navigation在React Native中使用自定义选项卡栏时停止默认转换？

问题描述：

我做了一个自定义标签栏在使用StackNavigator像这样如何使用React Navigation在React Native中使用自定义选项卡栏时停止默认转换？

export default StackNavigator(
    { 
    Login: { 
     screen: Login, 
    }, 
    ForgotPassword: { 
     screen: ForgotPassword, 
    }, 
    SignUp: { 
     screen: SignUp, 
    }, 
    Home: { 
     screen: Home, 
    }, 
    }, 
    { 
    headerMode: 'none', 
    navigationOptions: { 
     headerVisible: false, 
    }, 
    initialRouteName: 'Home', 
    }, 
);

现在我Home屏幕上有一个定制的标签栏像这样

export default() => (
    <View> 
    <Text>HOME</Text> 
    <TabBar /> 
    </View> 
)

分量我希望我的Home屏幕选项卡bar没有转换

目前它动画（left to right为IOS & bottom to up为Android）当标签的环节之一被点击

我查文档&发现mode属性，但它只有2个道具card & modal &我想没有动画

怎么办呢？

当我从代码理解，你的'Home'屏幕有4个标签标签栏。但是我不清楚，你想禁用什么样的转换？ –

是的，你说得对。当我在1选项卡上点击另一个时，在IOS bcz上从左到右过渡我已经在'StackNavigator'中设置了它。我想没有转换 – deadcoder0904

所以你想没有动画？由于没有过渡手段 - 另一个选项卡将不能被打开:) –

答

感谢@Vojtech，我得到的答案

const customAnimationFunc =() => ({ 
    screenInterpolator: (sceneProps) => { 
     const { scene } = sceneProps; 
     const tabs = ['Home']; 
     if (tabs.indexOf(scene.route.routeName) !== -1) return null; 
    }, 
}); 

export default StackNavigator(
    { 
    Login: { 
     screen: Login, 
    }, 
    ForgotPassword: { 
     screen: ForgotPassword, 
    }, 
    SignUp: { 
     screen: SignUp, 
    }, 
    Home: { 
     screen: Home, 
    }, 
    }, 
    { 
    headerMode: 'none', 
    transitionConfig: customAnimationFunc, 
    navigationOptions: { 
     headerVisible: false, 
    }, 
    initialRouteName: 'Home', 
    }, 
);

唯一的问题现在的问题是什么是动画。我将修改的答案时，几个屏幕动画&标签不

如何使用React Navigation在React Native中使用自定义选项卡栏时停止默认转换？

相关推荐