已合并
fix:Add use cases for missing onScroll and onTouch callbacks in the carousel library #2012
yanPeng创建于 13 天前
fix:Add use cases for missing onScroll and onTouch callbacks in the carousel library #2012
已合并
共 2 个文件变更+135-2
| @@ -72,7 +72,7 @@ | |||
| 72 | "@react-native-ohos/react-native-safe-area-context": "^4.7.5-rc.3", | 72 | "@react-native-ohos/react-native-safe-area-context": "^4.7.5-rc.3", |
| 73 | "@react-native-ohos/react-native-screens": "3.34.1", | 73 | "@react-native-ohos/react-native-screens": "3.34.1", |
| 74 | "@react-native-oh-tpl/react-native-slider": "^0.11.0-0.1.5", | 74 | "@react-native-oh-tpl/react-native-slider": "^0.11.0-0.1.5", |
| 75 | - "@react-native-oh-tpl/react-native-snap-carousel": "^3.9.1-0.1.3", | 75 | + "@react-native-ohos/react-native-snap-carousel": "3.9.2", |
| 76 | "@react-native-ohos/react-native-sound": "0.11.3", | 76 | "@react-native-ohos/react-native-sound": "0.11.3", |
| 77 | "@react-native-ohos/react-native-svg": "15.0.2-rc.13", | 77 | "@react-native-ohos/react-native-svg": "15.0.2-rc.13", |
| 78 | "@react-native-oh-tpl/react-native-tab-navigator": "^0.3.4-0.0.2", | 78 | "@react-native-oh-tpl/react-native-tab-navigator": "^0.3.4-0.0.2", |
| @@ -177,6 +177,91 @@ function StopAutoplayDemo({ data, renderItem }: { data: any[]; renderItem: any } | |||
| 177 | ); | 177 | ); |
| 178 | } | 178 | } |
| 179 | 179 | ||
| 180 | +function ScrollBeginDragDemo({ data, renderItem }: { data: any[]; renderItem: any }) { | ||
| 181 | + const [info, setInfo] = useState('未触发'); | ||
| 182 | + return ( | ||
| 183 | + <View> | ||
| 184 | + <Carousel | ||
| 185 | + data={data} | ||
| 186 | + renderItem={renderItem} | ||
| 187 | + {...CAROUSEL_BASE_PROPS} | ||
| 188 | + enableSnap={true} | ||
| 189 | + onScrollBeginDrag={() => setInfo('onScrollBeginDrag')} | ||
| 190 | + /> | ||
| 191 | + <Text style={{ marginTop: 4, fontSize: 14, color: '#ed6c00' }}>{`回调: ${info}`}</Text> | ||
| 192 | + <Text style={styles.paginationHint}>enableSnap=true 时绑定 _onScrollBeginDrag；请手指拖动轮播。</Text> | ||
| 193 | + </View> | ||
| 194 | + ); | ||
| 195 | +} | ||
| 196 | + | ||
| 197 | +function ScrollEndDragDemo({ data, renderItem }: { data: any[]; renderItem: any }) { | ||
| 198 | + const [info, setInfo] = useState('未触发'); | ||
| 199 | + return ( | ||
| 200 | + <View> | ||
| 201 | + <Carousel | ||
| 202 | + data={data} | ||
| 203 | + renderItem={renderItem} | ||
| 204 | + {...CAROUSEL_BASE_PROPS} | ||
| 205 | + enableMomentum={false} | ||
| 206 | + onScrollEndDrag={() => setInfo('onScrollEndDrag')} | ||
| 207 | + /> | ||
| 208 | + <Text style={{ marginTop: 4, fontSize: 14, color: '#ed6c00' }}>{`回调: ${info}`}</Text> | ||
| 209 | + <Text style={styles.paginationHint}>enableMomentum=false 时绑定 _onScrollEndDrag；请拖动后松手。</Text> | ||
| 210 | + </View> | ||
| 211 | + ); | ||
| 212 | +} | ||
| 213 | + | ||
| 214 | +function MomentumScrollEndDemo({ data, renderItem }: { data: any[]; renderItem: any }) { | ||
| 215 | + const [info, setInfo] = useState('未触发'); | ||
| 216 | + return ( | ||
| 217 | + <View> | ||
| 218 | + <Carousel | ||
| 219 | + data={data} | ||
| 220 | + renderItem={renderItem} | ||
| 221 | + {...CAROUSEL_BASE_PROPS} | ||
| 222 | + enableMomentum={true} | ||
| 223 | + onMomentumScrollEnd={() => setInfo('onMomentumScrollEnd')} | ||
| 224 | + /> | ||
| 225 | + <Text style={{ marginTop: 4, fontSize: 14, color: '#ed6c00' }}>{`回调: ${info}`}</Text> | ||
| 226 | + <Text style={styles.paginationHint}>enableMomentum=true 时绑定 _onMomentumScrollEnd；请快速滑动触发。</Text> | ||
| 227 | + </View> | ||
| 228 | + ); | ||
| 229 | +} | ||
| 230 | + | ||
| 231 | +function TouchStartDemo({ data, renderItem }: { data: any[]; renderItem: any }) { | ||
| 232 | + const [info, setInfo] = useState('未触发'); | ||
| 233 | + return ( | ||
| 234 | + <View> | ||
| 235 | + <Carousel | ||
| 236 | + data={data} | ||
| 237 | + renderItem={renderItem} | ||
| 238 | + {...CAROUSEL_BASE_PROPS} | ||
| 239 | + onTouchStart={() => setInfo('onTouchStart')} | ||
| 240 | + /> | ||
| 241 | + <Text style={{ marginTop: 4, fontSize: 14, color: '#ed6c00' }}>{`回调: ${info}`}</Text> | ||
| 242 | + <Text style={styles.paginationHint}>绑定 _onTouchStart；轻触轮播区域即可触发。</Text> | ||
| 243 | + </View> | ||
| 244 | + ); | ||
| 245 | +} | ||
| 246 | + | ||
| 247 | +function TouchEndDemo({ data, renderItem }: { data: any[]; renderItem: any }) { | ||
| 248 | + const [info, setInfo] = useState('未触发'); | ||
| 249 | + return ( | ||
| 250 | + <View> | ||
| 251 | + <Carousel | ||
| 252 | + data={data} | ||
| 253 | + renderItem={renderItem} | ||
| 254 | + {...CAROUSEL_BASE_PROPS} | ||
| 255 | + onTouchEnd={() => setInfo('onTouchEnd')} | ||
| 256 | + /> | ||
| 257 | + <Text style={{ marginTop: 4, fontSize: 14, color: '#ed6c00' }}>{`回调: ${info}`}</Text> | ||
| 258 | + <Text style={styles.paginationHint}> | ||
| 259 | + 绑定 _onTouchEnd；轻触轮播区域松手即可触发。 | ||
| 260 | + </Text> | ||
| 261 | + </View> | ||
| 262 | + ); | ||
| 263 | +} | ||
| 264 | + | ||
| 180 | function GetInputRangeDemo() { | 265 | function GetInputRangeDemo() { |
| 181 | const [index, setIndex] = useState(2); | 266 | const [index, setIndex] = useState(2); |
| 182 | const inputRange = getInputRangeFromIndexes([1, 0, -1], index, { itemWidth: 100, vertical: false }); | 267 | const inputRange = getInputRangeFromIndexes([1, 0, -1], index, { itemWidth: 100, vertical: false }); |
| @@ -568,9 +653,15 @@ export default function SnapCarousel(): JSX.Element { | |||
| 568 | const [enableSnapType, setEnableSnapType] = useState<boolean>(true); | 653 | const [enableSnapType, setEnableSnapType] = useState<boolean>(true); |
| 569 | const [verticalType, setVerticalType] = useState<boolean>(true); | 654 | const [verticalType, setVerticalType] = useState<boolean>(true); |
| 570 | const [layoutCardOffsetType, setLayoutCardOffsetType] = useState<boolean>(false); | 655 | const [layoutCardOffsetType, setLayoutCardOffsetType] = useState<boolean>(false); |
| 656 | + const [enableMomentumType, setEnableMomentumType] = useState<boolean>(true); | ||
| 657 | + const [enableMomentumType1, setEnableMomentumType1] = useState<boolean>(false); | ||
| 658 | + const [enableMomentumType2, setEnableMomentumType2] = useState<boolean>(false); | ||
| 659 | + const [apparitionDelayTime, setApparitionDelayTime] = useState<boolean>(true); | ||
| 571 | const [currentIndex, setCurrentIndex] = useState<number>(1); | 660 | const [currentIndex, setCurrentIndex] = useState<number>(1); |
| 572 | const [beforeIndex, setBeforeIndex] = useState<number>(0); | 661 | const [beforeIndex, setBeforeIndex] = useState<number>(0); |
| 662 | + const [activeIndex, setActiveIndex] = useState(0); | ||
| 573 | const [getterInfo, setGetterInfo] = useState<string>(''); | 663 | const [getterInfo, setGetterInfo] = useState<string>(''); |
| 664 | + const [hackInfo, setHackInfo] = useState<string>(''); | ||
| 574 | const [invertedEnabled, setInvertedEnabled] = useState<boolean>(false); | 665 | const [invertedEnabled, setInvertedEnabled] = useState<boolean>(false); |
| 575 | const [callbackMarginLoose, setCallbackMarginLoose] = useState<boolean>(false); | 666 | const [callbackMarginLoose, setCallbackMarginLoose] = useState<boolean>(false); |
| 576 | const [callbackBeforeCount, setCallbackBeforeCount] = useState(0); | 667 | const [callbackBeforeCount, setCallbackBeforeCount] = useState(0); |
| @@ -698,6 +789,17 @@ export default function SnapCarousel(): JSX.Element { | |||
| 698 | } | 789 | } |
| 699 | }> | 790 | }> |
| 700 | </TestCase> | 791 | </TestCase> |
| 792 | + <TestCase itShould="layout default 默认布局"> | ||
| 793 | + <Carousel | ||
| 794 | + data={ENTRIES1} | ||
| 795 | + renderItem={_renderItem} | ||
| 796 | + sliderWidth={300} | ||
| 797 | + itemWidth={100} | ||
| 798 | + sliderHeight={200} | ||
| 799 | + itemHeight={100} | ||
| 800 | + layout={'default'} | ||
| 801 | + /> | ||
| 802 | + </TestCase> | ||
| 701 | <TestCase itShould="layoutCardOffset 用于增加或减少“stack”和“tinder”布局中的默认卡片偏移量" arrange={ | 803 | <TestCase itShould="layoutCardOffset 用于增加或减少“stack”和“tinder”布局中的默认卡片偏移量" arrange={ |
| 702 | ({ setState }) => { | 804 | ({ setState }) => { |
| 703 | return ( | 805 | return ( |
| @@ -1189,6 +1291,9 @@ export default function SnapCarousel(): JSX.Element { | |||
| 1189 | isInteraction: true, | 1291 | isInteraction: true, |
| 1190 | useNativeDriver: true | 1292 | useNativeDriver: true |
| 1191 | }} | 1293 | }} |
| 1294 | + onSnapToItem={(index) => { | ||
| 1295 | + setActiveIndex(index); | ||
| 1296 | + }} | ||
| 1192 | /> | 1297 | /> |
| 1193 | </TestCase> | 1298 | </TestCase> |
| 1194 | <TestCase itShould="activeAnimationType自定义动画类型timing activeAnimationOptions自定义动画"> | 1299 | <TestCase itShould="activeAnimationType自定义动画类型timing activeAnimationOptions自定义动画"> |
| @@ -1258,6 +1363,21 @@ export default function SnapCarousel(): JSX.Element { | |||
| 1258 | <TestCase itShould="onScroll"> | 1363 | <TestCase itShould="onScroll"> |
| 1259 | <SnapCarouselExample /> | 1364 | <SnapCarouselExample /> |
| 1260 | </TestCase> | 1365 | </TestCase> |
| 1366 | + <TestCase itShould="onScrollBeginDrag enableSnap=true 时触发"> | ||
| 1367 | + <ScrollBeginDragDemo data={ENTRIES1} renderItem={_renderItem} /> | ||
| 1368 | + </TestCase> | ||
| 1369 | + <TestCase itShould="onScrollEndDrag enableMomentum=false 时触发"> | ||
| 1370 | + <ScrollEndDragDemo data={ENTRIES1} renderItem={_renderItem} /> | ||
| 1371 | + </TestCase> | ||
| 1372 | + <TestCase itShould="onMomentumScrollEnd enableMomentum=true 时触发"> | ||
| 1373 | + <MomentumScrollEndDemo data={ENTRIES1} renderItem={_renderItem} /> | ||
| 1374 | + </TestCase> | ||
| 1375 | + <TestCase itShould="onTouchStart _onTouchStart 轻触触发"> | ||
| 1376 | + <TouchStartDemo data={ENTRIES1} renderItem={_renderItem} /> | ||
| 1377 | + </TestCase> | ||
| 1378 | + <TestCase itShould="onTouchEnd _onTouchEnd 轻触轮播区域松手即可触发"> | ||
| 1379 | + <TouchEndDemo data={ENTRIES1} renderItem={_renderItem} /> | ||
| 1380 | + </TestCase> | ||
| 1261 | <TestCase itShould="onSnapToItem" arrange={ | 1381 | <TestCase itShould="onSnapToItem" arrange={ |
| 1262 | ({ setState }) => { | 1382 | ({ setState }) => { |
| 1263 | return ( | 1383 | return ( |
| @@ -1272,7 +1392,7 @@ export default function SnapCarousel(): JSX.Element { | |||
| 1272 | activeSlideAlignment={'start'} | 1392 | activeSlideAlignment={'start'} |
| 1273 | onSnapToItem={(index) => { setCurrentIndex(index + 1) }} | 1393 | onSnapToItem={(index) => { setCurrentIndex(index + 1) }} |
| 1274 | /> | 1394 | /> |
| 1275 | - <View style={{ flexDirection: 'row' }}> | 1395 | + <View style={{ flexDirection: 'row', alignItems: 'right' }}> |
 | |||
| 1276 | <Text> {`当前是第${currentIndex}个`}</Text> | 1396 | <Text> {`当前是第${currentIndex}个`}</Text> |
| 1277 | </View> | 1397 | </View> |
| 1278 | </View> | 1398 | </View> |
| @@ -1713,6 +1833,19 @@ const styles = StyleSheet.create({ | |||
| 1713 | fontSize: 13, | 1833 | fontSize: 13, |
| 1714 | color: '#333333', | 1834 | color: '#333333', |
| 1715 | }, | 1835 | }, |
| 1836 | + itemContainer: { | ||
| 1837 | + width: 104, | ||
| 1838 | + height: 104, | ||
| 1839 | + justifyContent: 'center', | ||
| 1840 | + alignItems: 'center', | ||
| 1841 | + borderRadius: 8, | ||
| 1842 | + backgroundColor: 'transparent', | ||
| 1843 | + borderWidth: 2, | ||
| 1844 | + borderColor: 'transparent', | ||
| 1845 | + }, | ||
| 1846 | + activeItemContainer: { | ||
| 1847 | + borderColor: '#4CAF50', | ||
| 1848 | + }, | ||
| 1716 | paginationContainer: { | 1849 | paginationContainer: { |
| 1717 | marginTop: 8, | 1850 | marginTop: 8, |
| 1718 | paddingVertical: 8, | 1851 | paddingVertical: 8, |
【AI-Review】【一般】【基础代码问题】【代码逻辑错误】alignItems 值无效
● 问题: 文件 24P4/rn-tester/examples/react-native-snap-carousel/SnapCarousel.tsx 第1395行，
<View style={{ flexDirection: 'row', alignItems: 'right' }}>中的alignItems: 'right'不是 React Native 支持的合法值。React Native 中alignItems的合法值仅为'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'，不存在'right'。此行由原flexDirection: 'row'修改为新增alignItems: 'right'，属于本次 PR 的增量变更。● 影响: 一般。该 TestCase 渲染时此样式会被 React Native 忽略（并触发运行时警告），无法实现预期的子元素右对齐效果；同时 TypeScript 严格模式下会触发类型错误，影响构建。
● 建议: 若需让 Text 在 flexDirection: 'row' 的容器中右对齐，应使用合法值
alignItems: 'flex-end'，或在 Text 上设置alignSelf: 'flex-end'/textAlign: 'right'： <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>