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

【问题标题】：Using Tab Bar for Vertical Scrolling in React Native在 React Native 中使用 Tab Bar 进行垂直滚动
【发布时间】：2018-06-01 11:17:42
【问题描述】：

我想在 react native 中通过改变标签视图来实现垂直滚动。

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

这里实现的是横屏换屏，而我需要实现这个竖屏。

【问题讨论】：

您希望标签页也垂直显示在视图中吗？
@KranthiKumarJulakanti 不，标签将水平放置。

标签： react-native scrollview

【解决方案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 }] };
  },
});

这里的动画是水平幻灯片，您可以将变换更改为您需要的动画，并通过更改它返回的变换对象并在单击选项卡时导航到所需的屏幕

【讨论】：

我将如何在选项卡上应用transitionConfig，您能否分享完整的代码。这将帮助我更好地理解。
对不起，这不适用于标签视图，它用于更改屏幕的导航动画