@uiw/react-native
Version:
UIW for React Native
150 lines (138 loc) • 4.03 kB
Markdown
SwipeAction 滑动操作组件。
---
结合手势操作，从屏幕一侧唤出操作。
## 基础示例
```jsx
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { SwipeAction } from '@uiw/react-native';
import Layout, { Container } from '../../Layout';
import { ComProps } from '../../routes';
const { Header, Body, Card, Footer } = Layout;
export interface SwipeActionProps extends ComProps {
}
export default class SwipeActionView extends Component<SwipeActionProps> {
newRef: any;
render() {
const { route } = this.props;
const description = route.params.description;
const title = route.params.title;
const right = [
{
text: '查看备注',
color: 'orange',
x: 250,
onPress: () => {
this.newRef?.swipeable?.close()
},
},
{
text: '删除',
color: 'red',
x: 400,
onPress: () => {
this.newRef?.swipeable?.close()
},
},
{
text: '不显示',
color: 'green',
x: 400,
onPress: () => {
this.newRef?.swipeable?.close()
},
},
];
const left = [
{
text: '左侧查看',
color: 'pink',
onPress: () => {
this.newRef?.swipeable?.close()
},
},
];
return (
<Container>
<Layout>
<Header title={title} description={description} />
<Body>
<Card title="左右滑动，显示按钮" style={styles.card}>
<SwipeAction
ref={ref => this.newRef = ref}
right={right}
left={left}
onSwipeableRightOpen={() => console.log('right')}
onSwipeableLeftOpen={() => () => console.log('left')}
>
<View style={[styles.view]}>
<Text>滑动</Text>
</View>
</SwipeAction>
</Card>
</Body>
<Footer />
</Layout>
</Container>
);
}
}
const styles = StyleSheet.create({
card: {
backgroundColor: '#fff',
paddingLeft: 20,
paddingRight: 20,
paddingBottom: 30,
},
view: {
height: 30
},
});
```
## Props
组件继承react-native-gesture-handler[`Swipeable`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/components/swipeable)
```tsx
export interface Column {
/** 显示文字 */
text: string;
/** 背景色 */
color: string;
/** 滑动距离多少出现 */
x?: number;
/** 点击元素触发 */
onPress?: () => void;
/** 自定义元素 */
render?:(text:string,record: Column,index: number)=>React.ReactNode
}
export interface SwipeActionProps {
/** 右边滑动出来的元素 */
right?: Array<Column>;
/** 左边滑动出来的元素 */
left?: Array<Column>;
/** 滑动条宽度 默认20% */
swipeWidth?:string | number
/** 其余api参考文档 react-native-gesture-handler/Swipeable */
enableTrackpadTwoFingerGesture?: boolean;
friction?: number;
leftThreshold?: number;
rightThreshold?: number;
overshootLeft?: boolean;
overshootRight?: boolean;
overshootFriction?: number;
onSwipeableLeftOpen?: () => void;
onSwipeableRightOpen?: () => void;
onSwipeableOpen?: () => void;
onSwipeableClose?: () => void;
onSwipeableLeftWillOpen?: () => void;
onSwipeableRightWillOpen?: () => void;
onSwipeableWillOpen?: () => void;
onSwipeableWillClose?: () => void;
children?: React.ReactNode;
renderLeftActions?: (progressAnimatedValue: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation) => React.ReactNode;
renderRightActions?: (progressAnimatedValue: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation) => React.ReactNode;
useNativeAnimations?: boolean;
animationOptions?: Record<string, unknown>;
containerStyle?: StyleProp<ViewStyle>;
childrenContainerStyle?: StyleProp<ViewStyle>;
}
```