使用FlatList发生NativeBase可滑动

时间:2019-05-13 11:16:50

标签: javascript reactjs react-native

在SwipeRow在Native Base中左右滑动时,视图会上下摇摆,这与在Native Base选项卡中使用Flatlist / scrollView时遇到的问题相同。

import React, {PureComponent} from 'react';
import { StyleSheet, View, FlatList } from 'react-native';
import { Container, SwipeRow, Text, Icon, Button } from 'native-base';
import { HeadersDetail } from '../../common/header';    //
import { Colors } from '../../resource'; //

export default class BalancePage extends PureComponent {
  constructor(props) {
    super(props)
    this.state = { data: [{ key: 'a' ,value: 'Row one'}, { key: 'b' , value: 'Row two' }, { key: 'c' , value: 'Row twoa' }, { key: 'd' , value: 'Row twoq' }] }
    this.component = [];
    this.selectedRow;
  }
  render() {
    return (
      <Container>
        <HeadersDetail headerTitle="平台余额" navigation={this.props.navigation}/>
          <FlatList
            data={this.state.data}
            keyExtractor={(item) => item.key}
            renderItem={({ item }) => <SwipeRow
              ref={(c) => { this.component[item.key] = c }}
              rightOpenValue={-75}
              disableRightSwipe={true}
              onRowOpen={() => {
                if (this.selectedRow && this.selectedRow !== this.component[item.key]) { 
                  this.selectedRow._root.closeRow(); 
                }
                this.selectedRow = this.component[item.key]
              }}
              body={
                <View style={{ paddingLeft: 20 }}>
                  <Text>{item.value}</Text>
                </View>
              }
              right={
                <Button danger onPress={() => alert('Delete')}>
                  <Icon active name="trash" />
                </Button>
              }
            />}
          />
      </Container>
    );
  }
}

左右滑动不会影响上下滚动。 enter image description here

0 个答案:

没有答案