React Navigation TabNavigator滑动禁用:SwipeRow(NativeBase)无法正确渲染[Android]

时间:2018-02-15 16:11:46

标签: android reactjs react-native react-navigation native-base

我使用来自react-navigation的TabNavigator,并在一个标签中有一个可滑动的组件(来自NativeBase的SwipeRow组件)。当在该组件上向左或向右滑动时,它会显示上下文菜单,因此我通过在swipeEnabled: false中声明TabNavigator来禁用Android中的选项卡(默认情况下iOS为false)中的滑动功能。好吧,TabSwiping现在已被禁用,但突然间,上下文菜单不再正确呈现。在使用swipeEnabled: true和iOS的Android上,一切正常!

屏幕截图(卡片元素向左滑动):

Android swipeEnabled: false Android with <code>swipeEnabled: false</code>

iOS(正确) iOS (correctly)

代码:

    <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正确呈现?

1 个答案:

答案 0 :(得分:0)

我现在很确定这是造型问题。为SwipeRow style-prop添加固定高度可以解决问题,flex: 1(见上文)使上下文菜单扩展到整个显示高度。不过,我不知道内容的高度是多少。现在我尝试计算它非常接近,但我对swipeEnabled: false之前的解决方案感到更满意。禁用此选项对整个NativeBase ContentContainer或Tab组件有何影响?