|
| 1 | +import React, { useRef, useState, useEffect, forwardRef } from 'react'; |
| 2 | +import { View, Text, StyleSheet, Image, Animated, Easing } from 'react-native'; |
| 3 | +import { ClipPathView, ClipPathViewH } from 'react-native-clippathview'; |
| 4 | +// import ClipPathView from '../lib/clippath.web' |
| 5 | +import { |
| 6 | + myPath1, |
| 7 | + myPath2, |
| 8 | + myPath3, |
| 9 | + myPath4, |
| 10 | + myPath5, |
| 11 | + myPath6, |
| 12 | + myPath10, |
| 13 | + myPath11, |
| 14 | +} from './paths'; |
| 15 | + |
| 16 | +const CustomView = React.forwardRef((props, ref) => { |
| 17 | + // some additional logic |
| 18 | + // console.log(StyleSheet.flatten(props.style)) |
| 19 | + return ( |
| 20 | + <View ref={ref} {...props}> |
| 21 | + <Text>custom view {props.d}</Text> |
| 22 | + |
| 23 | + <ClipPathViewH |
| 24 | + style={{ |
| 25 | + zIndex: 1, |
| 26 | + backgroundColor: '#f00', |
| 27 | + width: 375, |
| 28 | + height: 300, |
| 29 | + }} |
| 30 | + d={props.d}></ClipPathViewH> |
| 31 | + </View> |
| 32 | + ); |
| 33 | +}); |
| 34 | + |
| 35 | +const WClipPathView = React.forwardRef((props, ref) => { |
| 36 | + const { style, ...otherProps } = props; |
| 37 | + // console.log('WClipPathView', style[0]) |
| 38 | + console.log('WClipPathView', otherProps.d); |
| 39 | + useEffect(() => { |
| 40 | + console.log('ref', ref); |
| 41 | + }, [ref]); |
| 42 | + return ( |
| 43 | + <ClipPathViewH ref={ref} style={style[0]} d={otherProps.d}></ClipPathViewH> |
| 44 | + ); |
| 45 | +}); |
| 46 | + |
| 47 | +const AniClipPathView = Animated.createAnimatedComponent(CustomView); |
| 48 | + |
| 49 | +function Demo() { |
| 50 | + const [path, setPath] = useState('?'); |
| 51 | + const offset = useRef(new Animated.Value(-400)).current; |
| 52 | + const headerViewHeight = 200; |
| 53 | + const screenWidth = 375; |
| 54 | + const ScreenConstant = { |
| 55 | + height: 400, |
| 56 | + }; |
| 57 | + |
| 58 | + offset.addListener((value) => { |
| 59 | + console.log(`value: ${JSON.stringify(value)}`); |
| 60 | + }); |
| 61 | + |
| 62 | + const generatePath = (arcDepth: number) => { |
| 63 | + return `M 0 0 |
| 64 | + L 0 ${headerViewHeight + arcDepth} |
| 65 | + Q ${screenWidth / 2} ${headerViewHeight - arcDepth - 1} |
| 66 | + ${screenWidth} ${headerViewHeight + arcDepth} |
| 67 | + L ${screenWidth} 0 |
| 68 | + L 0 0 |
| 69 | + Z`; |
| 70 | + }; |
| 71 | + |
| 72 | + const d = offset.interpolate({ |
| 73 | + inputRange: [-headerViewHeight, -26, 0], |
| 74 | + outputRange: [generatePath(-26), generatePath(-26), generatePath(0)], |
| 75 | + }); |
| 76 | + |
| 77 | + const translateY = |
| 78 | + offset.interpolate({ |
| 79 | + inputRange: [ |
| 80 | + -ScreenConstant.height, |
| 81 | + -headerViewHeight, |
| 82 | + 0, |
| 83 | + ScreenConstant.height, |
| 84 | + ], |
| 85 | + outputRange: [headerViewHeight - ScreenConstant.height, 0, 0, 0], |
| 86 | + }) ?? 0; |
| 87 | + |
| 88 | + // const d = offset.interpolate({ |
| 89 | + // inputRange: [0, 1], |
| 90 | + // outputRange: [1, 2], |
| 91 | + // }); |
| 92 | + |
| 93 | + console.log(d); |
| 94 | + useEffect(() => { |
| 95 | + Animated.loop( |
| 96 | + Animated.timing(offset, { |
| 97 | + toValue: 1, |
| 98 | + duration: 5000, |
| 99 | + easing: Easing.linear, |
| 100 | + useNativeDriver: true, |
| 101 | + }), |
| 102 | + { |
| 103 | + iterations: -1, |
| 104 | + } |
| 105 | + ).start(); |
| 106 | + }, [offset]); |
| 107 | + |
| 108 | + // const g1 = generatePath(-26); |
| 109 | + // console.log(g1); |
| 110 | + // const g2 = generatePath(0); |
| 111 | + // console.log(g2); |
| 112 | + |
| 113 | + return ( |
| 114 | + <View> |
| 115 | + <Text>{JSON.stringify(d)}</Text> |
| 116 | + <AniClipPathView |
| 117 | + svgKey="1" |
| 118 | + style={{ |
| 119 | + zIndex: 1, |
| 120 | + backgroundColor: '#ff0', |
| 121 | + width: 375, |
| 122 | + height: 600, |
| 123 | + // position: 'absolute', |
| 124 | + // flexDirection: 'column-reverse', |
| 125 | + transform: [ |
| 126 | + { |
| 127 | + translateY: translateY, |
| 128 | + }, |
| 129 | + ], |
| 130 | + }} |
| 131 | + d={d}></AniClipPathView> |
| 132 | + <ClipPathView |
| 133 | + svgKey="2" |
| 134 | + style={{ |
| 135 | + zIndex: 1, |
| 136 | + backgroundColor: '#201E1E', |
| 137 | + width: 375, |
| 138 | + height: 60, |
| 139 | + // position: 'absolute', |
| 140 | + // flexDirection: 'column-reverse', |
| 141 | + }} |
| 142 | + d="M 0 0 L 0 14 Q 187.5 65 375 14 L 375 0 L 0 0 Z"> |
| 143 | + <Image |
| 144 | + // style={styles.tinyLogo} |
| 145 | + style={{ width: '100%', height: '100%' }} |
| 146 | + source={{ |
| 147 | + uri: 'https://www.sf-express.com/uploads/4047_1461_61d9908db1.jpg', |
| 148 | + }} |
| 149 | + /> |
| 150 | + </ClipPathView> |
| 151 | + </View> |
| 152 | + ); |
| 153 | + |
| 154 | + // return ( |
| 155 | + // <AnimatedClipPathView |
| 156 | + // style={{ |
| 157 | + // zIndex: 1, |
| 158 | + // backgroundColor: "#201E1E", |
| 159 | + // width: 375, |
| 160 | + // height: 60, |
| 161 | + // position: "absolute", |
| 162 | + // flexDirection: "column-reverse", |
| 163 | + // transform: [ |
| 164 | + // { |
| 165 | + // translateY: |
| 166 | + // this.props.offset?.interpolate({ |
| 167 | + // inputRange: [ |
| 168 | + // -ScreenConstant.height, |
| 169 | + // -headerViewHeight, |
| 170 | + // 0, |
| 171 | + // ScreenConstant.height |
| 172 | + // ], |
| 173 | + // outputRange: [ |
| 174 | + // headerViewHeight - ScreenConstant.height, |
| 175 | + // 0, |
| 176 | + // 0, |
| 177 | + // 0 |
| 178 | + // ] |
| 179 | + // }) ?? 0 |
| 180 | + // } |
| 181 | + // ] |
| 182 | + // }} |
| 183 | + // d={offset?.interpolate({ |
| 184 | + // inputRange: [-headerViewHeight, -26, 0], |
| 185 | + // outputRange: [generatePath(-26), generatePath(-26), generatePath(0)] |
| 186 | + // })} |
| 187 | + // > |
| 188 | + |
| 189 | + // ) |
| 190 | +} |
| 191 | + |
| 192 | +export default Demo; |
0 commit comments