Question

我想通过在native native中更改选项卡视图来实现Vertical Scrolling。

请检查此网址中的演示： https://github.com/react-native-community/react-native-tab-view

这里的实现是横向屏幕更改，而我需要实现这个垂直。

Answer 1

尝试使用TouchableOpacity选项卡按钮并使用

react-navigation

导航包并尝试使用transitionConfig选项

自定义导航动画

var transitionConfig = () => ({
  transitionSpec: {
    duration: 300,
    easing: Easing.out(Easing.poly(4)),
    timing: Animated.timing,
  },
  screenInterpolator: sceneProps => {
    const { layout, position, scene } = sceneProps;
    const { index } = scene;

    const height = layout.initHeight;
    const width = layout.initWidth;
    const translateX = position.interpolate({
      inputRange: [index - 1, index, index + 1],
      outputRange: [height, 0, 0],
    });

    const opacity = position.interpolate({
      inputRange: [index - 1, index - 0.99, index],
      outputRange: [0, 1, 1],
    });

    return { opacity, transform: [{translateX} ] };
  },
});

此处动画是水平幻灯片，您可以将变换更改为所需的动画，并通过更改它返回的变换对象并在单击选项卡

时导航到所需的屏幕

使用Tab Bar在React Native中进行垂直滚动

1 个答案: