Question

我在Component中创建了一个自定义标签栏，使用StackNavigator就像这样

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屏幕标签栏没有转换

当点击其中一个标签链接时，它会为left to right和IOS bottom to up设置Android动画

我检查过docs＆amp;找到mode属性，但它只有2个道具card＆amp; modal＆amp;我不想要动画

怎么做？

Answer 1

感谢@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中使用自定义标签栏时停止默认转换？

1 个答案: