我在react-native-reanimated的Animated.View内部有一个来自react-native-gesture-handler的ScrollView。但是,它只是不滚动,我正在尝试找出原因。这是我的片段:
{/* This is the drawer that's going to expand */}
<Animated.View style={{width: drawerWidth, height: '100%', flexDirection: 'column', alignItems: 'center', overflow: 'hidden'}}>
<View style={{width: '100%', flexDirection: 'row'}}>
<View style={{padding: 20, backgroundColor: 'lightgrey', flexWrap: 'nowrap', flex: 1, width: '50%', height: 72}}>
<Text style={{flexWrap: 'nowrap', flexShrink: 0, textAlign: 'center', minHeight: 72}} type='Body2'>Block</Text>
</View>
<View style={{padding: 20, backgroundColor: 'lightgrey', flexWrap: 'nowrap', width: '50%', minHeight: 72}}>
<Text style={{flexWrap: 'nowrap', flexShrink: 0, textAlign: 'center'}} type='Body2'>Borders</Text>
</View>
</View>
{/* This is the main content. Needs to be dynamic */}
<ScrollView style={{width: '100%'}}
contentContainerStyle={{flexDirection: 'column', borderWidth: 1, flexGrow: 1}}
>
<Design />
<DesignLibrary
onClose={(pattern: string | undefined) => {
setDesignModalVisible(false)
if (pattern !== undefined) {
props.setDesign(pattern)
}}}
/>
<Text style={{borderWidth: 1}}>Test</Text>
</ScrollView>
</Animated.View>
我尝试将 Animated.View 转换为具有固定宽度的常规视图,我尝试将scrollView切换为由react-native-gesture-handler和react-native导入的视图,并且我尝试给出滚动查看不同高度。我期望 ScrollView 滚动其中的内容,但它的表现就像是常规视图。我还尝试添加大量文本标签来将所包含内容的高度延伸到屏幕的高度以上,但没有任何效果。
事实证明,无论出于何种原因,react-native-gesture-handler 都不起作用。将其替换为 ScrollView 的反应本机实现并调整样式使其正常工作。