在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>
);
}
}