Question

我被要求在抽屉内添加一个水平滚动视图。（想想 Instagram 故事，但在抽屉里。）动画效果非常不一致。最烦的是向左滑动，scrollview经常不滚动，drawer反而开始关闭动画。

抽屉已经存在一段时间了，所以设置问题不是问题。
这是我的代码：

// Drawer.navigator
  const DrawerContent = () => {
    // UI of the drawer
    return <Drawer activeRoute={activeRoute} />;
  };

  return (
    <DrawerNav.Navigator
      drawerContent={DrawerContent}
      drawerStyle={{ width: 320 }}
      initialRouteName="Home"
      drawerContentOptions={{
        someColor: theme.someColor,
      }}
    >
       // other screens
    </DrawerNav.Navigator>

import { ScrollView } from 'react-native';

const Container = styled.View`
  height: 62.5px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;


const ThingWrapper = styled(Flex)`
  height: 62.5px;
  align-items: center;
  justify-content: center;
  .lastBubble {
    margin-right: 16px;
  }
`;

...

<Container>
  <ScrollView
     horizontal
     vertical={false}
     directionalLockEnabled
     nestedScrollEnabled
     showsHorizontalScrollIndicator={false}
     pinchGestureEnabled={false}
     contentContainerStyle={{
       zIndex: 9999,
     }}
  >
     {thingsToRender.map((thing, index) => {
       return (
          <ThingWrapper>
            <AnyThing thingId={thing.id} />
          </ThingWrapper>
        );
      })}
  </ScrollView>
</Container>

我认为元素焦点可能是这里的主要问题，但我不知道如何解决这个问题。任何帮助是极大的赞赏。谢谢！

Answer 1

我通过创建此对象并将其作为参数提供给每个屏幕来修复它。作为一个骗局，这会禁用抽屉滑动打开/关闭。

const drawerScreenOptions = {
  gestureEnabled: true,
  swipeEnabled: false,
};

// Drawer.navigator
  const DrawerContent = () => {
    // UI of the drawer
    return <Drawer activeRoute={activeRoute} />;
  };

  return (
    <DrawerNav.Navigator
      drawerContent={DrawerContent}
      drawerStyle={{ width: 320 }}
      initialRouteName="Home"
    >
       // !! Give options to all screens
        <DrawerNav.Screen
          name="screenX"
          component={ScreenXNavigator}
          options={drawerScreenOptions}
        />
    </DrawerNav.Navigator>

反应原生抽屉内的水平滚动视图

1 个答案: