Star7
338
代码
代码
Issues60
Pull Requests41
项目讨论
Wiki
分析
Star7
338
已合并
fix:Add use cases for missing onScroll and onTouch callbacks in the carousel library #2009
yanPeng创建于 5 天前
fix:Add use cases for missing onScroll and onTouch callbacks in the carousel library #2009
已合并
yanPeng创建于 5 天前
从yp9522/rnt-rjj-new0814carousel-bug-77code合入到CPF-RN/rntbr_rnoh0.77
共 3 个文件变更+112-2
M25P3/package.json+1-1
@@ -32,7 +32,7 @@
32 "@react-native-ohos/react-native-file-access": "3.1.2-rc.1",32 "@react-native-ohos/react-native-file-access": "3.1.2-rc.1",
33 "@react-native-ohos/react-native-permissions": "5.3.1-rc.1",33 "@react-native-ohos/react-native-permissions": "5.3.1-rc.1",
34 "@react-native-ohos/react-native-scroll-bottom-sheet": "0.7.1-rc.1",34 "@react-native-ohos/react-native-scroll-bottom-sheet": "0.7.1-rc.1",
35- "@react-native-ohos/react-native-snap-carousel": "3.10.1-rc.1",35+ "@react-native-ohos/react-native-snap-carousel": "3.10.1",
36 "@react-native-ohos/react-native-sqlite-storage": "6.0.2-rc.1",36 "@react-native-ohos/react-native-sqlite-storage": "6.0.2-rc.1",
37 "@react-native-ohos/react-native-webview": "13.15.1-rc.1",37 "@react-native-ohos/react-native-webview": "13.15.1-rc.1",
38 "@react-native-ohos/stack": "7.2.11-rc.1",38 "@react-native-ohos/stack": "7.2.11-rc.1",
M25P3/rn-tester/examples/react-native-snap-carousel/SnapCarousel.tsx+111-0
@@ -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+ 
180function GetInputRangeDemo() {265function 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 });
@@ -699,6 +784,17 @@ export default function SnapCarousel(): JSX.Element {
699 }784 }
700 }>785 }>
701 </TestCase>786 </TestCase>
787+ <TestCase itShould="layout default 默认布局">
788+ <Carousel
789+ data={ENTRIES1}
790+ renderItem={_renderItem}
791+ sliderWidth={300}
792+ itemWidth={100}
793+ sliderHeight={200}
794+ itemHeight={100}
795+ layout={'default'}
796+ />
797+ </TestCase>
702 <TestCase itShould="layoutCardOffset 用于增加或减少“stack”和“tinder”布局中的默认卡片偏移量" arrange={798 <TestCase itShould="layoutCardOffset 用于增加或减少“stack”和“tinder”布局中的默认卡片偏移量" arrange={
703 ({ setState }) => {799 ({ setState }) => {
704 return (800 return (
@@ -1262,6 +1358,21 @@ export default function SnapCarousel(): JSX.Element {
1262 <TestCase itShould="onScroll">1358 <TestCase itShould="onScroll">
1263 <SnapCarouselExample />1359 <SnapCarouselExample />
1264 </TestCase>1360 </TestCase>
1361+ <TestCase itShould="onScrollBeginDrag enableSnap=true 时触发">
1362+ <ScrollBeginDragDemo data={ENTRIES1} renderItem={_renderItem} />
1363+ </TestCase>
1364+ <TestCase itShould="onScrollEndDrag enableMomentum=false 时触发">
1365+ <ScrollEndDragDemo data={ENTRIES1} renderItem={_renderItem} />
1366+ </TestCase>
1367+ <TestCase itShould="onMomentumScrollEnd enableMomentum=true 时触发">
1368+ <MomentumScrollEndDemo data={ENTRIES1} renderItem={_renderItem} />
1369+ </TestCase>
1370+ <TestCase itShould="onTouchStart _onTouchStart 轻触触发">
1371+ <TouchStartDemo data={ENTRIES1} renderItem={_renderItem} />
1372+ </TestCase>
1373+ <TestCase itShould="onTouchEnd _onTouchEnd 轻触轮播区域松手即可触发">
1374+ <TouchEndDemo data={ENTRIES1} renderItem={_renderItem} />
1375+ </TestCase>
1265 <TestCase itShould="onSnapToItem" arrange={1376 <TestCase itShould="onSnapToItem" arrange={
1266 ({ setState }) => {1377 ({ setState }) => {
1267 return (1378 return (
M25P3/scripts/testPackages.json+0-1
@@ -2,7 +2,6 @@
2 "packages":[2 "packages":[
3 {"name":"@react-native-ohos/react-native-exception-handler","version": "2.11.1-rc.1"},3 {"name":"@react-native-ohos/react-native-exception-handler","version": "2.11.1-rc.1"},
4 {"name":"@react-native-ohos/react-native-slider","version": "0.12.1-rc.2"},4 {"name":"@react-native-ohos/react-native-slider","version": "0.12.1-rc.2"},
5- {"name":"@react-native-ohos/react-native-snap-carousel","version": "3.10.1-rc.1"},
6 {"name":"@react-native-ohos/react-native-get-random-values","version": "1.12.1-rc.2"},5 {"name":"@react-native-ohos/react-native-get-random-values","version": "1.12.1-rc.2"},
7 {"name":"@react-native-ohos/react-native-image-zoom-viewer","version": "3.0.3-rc.1"},6 {"name":"@react-native-ohos/react-native-image-zoom-viewer","version": "3.0.3-rc.1"},
8 {"name":"@react-native-ohos/react-native-image-marker","version": "1.3.1-rc.2"},7 {"name":"@react-native-ohos/react-native-image-marker","version": "1.3.1-rc.2"},