简体   繁体   中英

React Navigation TabNavigator swipe disabled: SwipeRow (NativeBase) not rendering correctly [Android]

I use the TabNavigator from react-navigation and have in one Tab a swipeable Component (SwipeRow component from NativeBase). When swiping left or right on that component it shows context menu, so I disabled the swiping Ability from the Tabs in android (iOS is false by default) by declaring swipeEnabled: false in TabNavigator . Well, TabSwiping is now disabled, but all of a sudden, the context menu is not rendered correctly anymore. On Android with swipeEnabled: true and iOS everything works fine!

Screenshots (Card Element swiped to the left):

Android with swipeEnabled: false 带有<code> swipeEnabled:false </ code>的Android

iOS (correctly) iOS(正确)

Code:

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

Any ideas why this is happening? Can I disable TabSwiping another way or can I style the menu differently so it gets renders correctly with swipeEnabled: false on android?

I am now pretty sure it is a styling issue. Adding a fixed height to SwipeRow style-prop fixes the problem, flex: 1 (see above) makes the context menu expand over the whole display height. Nevertheless, I dont know what the height of the content will be. For now I try to calculate it pretty close, but I was happier with the solution before swipeEnabled: false . What does disabling this option do to the overall NativeBase Content , Container or Tab component?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM