我使用来自react-navigation
的TabNavigator,并在一个标签中有一个可滑动的组件(来自NativeBase的SwipeRow组件)。当在该组件上向左或向右滑动时,它会显示上下文菜单,因此我通过在swipeEnabled: false
中声明TabNavigator
来禁用Android中的选项卡(默认情况下iOS为false)中的滑动功能。好吧,TabSwiping现在已被禁用,但突然间,上下文菜单不再正确呈现。在使用swipeEnabled: true
和iOS的Android上,一切正常!
屏幕截图(卡片元素向左滑动):
代码:
<SwipeRow
leftOpenValue={100}
rightOpenValue={-100}
left={<View style={{flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
marginTop: 7,
marginBottom: 7,
marginLeft: 3,
marginRight: 3,}}>
<Button>...</Button>
<Button>...</Button>
</View>}
body={<Card > ... </Card>}
right={/* similar to `left` */}
style={{backgroundColor: 'transparent',
padding: 0,
paddingRight:0,
paddingLeft:0,
paddingTop:0,
paddingBottom:0,
margin: 0,
marginTop: 0,
marginLeft: 0,
marginRight: 0,
marginBottom: 0,
borderBottomWidth:0,
flex: 1,
}}
/>
为什么会发生这种情况?我可以通过其他方式禁用TabSwiping,还是可以对菜单进行不同的设置,以便在android上使用swipeEnabled: false
正确呈现?
答案 0 :(得分:0)
我现在很确定这是造型问题。为SwipeRow style-prop添加固定高度可以解决问题,flex: 1
(见上文)使上下文菜单扩展到整个显示高度。不过,我不知道内容的高度是多少。现在我尝试计算它非常接近,但我对swipeEnabled: false
之前的解决方案感到更满意。禁用此选项对整个NativeBase Content
,Container
或Tab组件有何影响?