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

Question

我被要求在抽屉内添加一个水平滚动视图。(想想Instagram上的故事，但放在抽屉里。(动画的效果非常不一致。最烦人的是向左滑动，滚动视图通常不会滚动，而是抽屉开始关闭动画。

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

// 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>