sdcxtech / react-native-troika

Native UI Component for React Native, including nested-scroll, pull-to-refresh, bottom-sheet, etc.
https://todoit.tech
167 stars 23 forks source link

在ios中路由被卸载后,再次显示刷新效果丢失 #24

Closed TallNutAlt closed 9 months ago

TallNutAlt commented 9 months ago

https://github.com/sdcxtech/react-native-troika/assets/109561878/16bdb81a-a4e8-4c56-8f6c-60400e348eec

下拉刷新代码 <ScrollView style={{height: 100 % -tabBarHeight, position: 'relative'}} alwaysBounceHorizontal={false} alwaysBounceVertical={false} nestedScrollEnabled onScroll={onMomentumScrollEnd} ref={scrollViewRef} refreshControl={ <RefreshControl refreshing={refreshing} onRefresh={() => { if (cityQuery.default) { onRefresh({provinceName: location}); } else { onRefresh(); } }} /> }> 路由控制代码 {store.useType == 0 ? ( <Stack.Screen name="home" options={{ headerShown: false, freezeOnBlur: true, }} component={MemoizedTabBar} /> ) : ( <Stack.Screen name="dir" options={{ headerShown: false, freezeOnBlur: true, }} component={MemoizedTabBarUseType} /> )}

TallNutAlt commented 9 months ago

下拉效果是参考文档自定义的 export function CustomPullToRefreshHeader(props: PullToRefreshHeaderProps) { const {onRefresh, refreshing} = props;

const [text, setText] = useState('下拉刷新');

const onStateChanged = useCallback( (event: PullToRefreshStateChangedEvent) => { const state = event.nativeEvent.state; if (state === PullToRefreshStateIdle) { setText('下拉刷新'); } else if (state === PullToRefreshStateRefreshing) { setText('正在刷新...'); } else { setText('松开刷新'); } }, [], );

// const onOffsetChanged = useCallback( // (event: PullToRefreshOffsetChangedEvent) => { // // console.log('refresh header offset', event.nativeEvent.offset); // }, // [], // );

return ( <PullToRefreshHeader style={{ height: verticalScale(40), alignItems: 'center', justifyContent: 'center', }} // onOffsetChanged={onOffsetChanged} onStateChanged={onStateChanged} onRefresh={onRefresh} refreshing={refreshing}> <View style={{flexDirection: 'row'}}>

      <Text style={{marginLeft: scale(10), fontSize: scale(12)}}>{text}</Text>
  </View>
</PullToRefreshHeader>

); }

listenzz commented 9 months ago

请提供一个可以运行的小 demo。

TallNutAlt commented 9 months ago

@listenzz 复现出来了。https://github.com/16638964387/iosref/tree/main

TallNutAlt commented 9 months ago

@listenzz 在ios中默认执行onRefresh就会出现

TallNutAlt commented 9 months ago

@listenzz

https://github.com/sdcxtech/react-native-troika/assets/109561878/28023aff-51cb-4441-a63d-8eaeb1fb9004

listenzz commented 9 months ago

@16638964387 试下 0.21.0

TallNutAlt commented 9 months ago

@listenzz npm还没发0.21吧。拉的是0.20的

TallNutAlt commented 9 months ago
image
listenzz commented 9 months ago

@16638964387 因为是刚发布的,现在你在试试吧

TallNutAlt commented 9 months ago

@listenzz 明天吧 我刚用yarn拉还是老的yarn cache clean 后再拉也是0.20

TallNutAlt commented 9 months ago

@listenzz 这个不显示的好了 有个新问题哥你遇到过吗

TallNutAlt commented 9 months ago

@listenzz

https://github.com/sdcxtech/react-native-troika/assets/109561878/4f69efd2-fb91-43c8-924b-352b2cfb9d5f

TallNutAlt commented 9 months ago

只有切换的时候 onRefresh会多执行

TallNutAlt commented 9 months ago

我的 useEffect(() => { const dispose = autorun(() => { setCityQuery(store.jobLoaction); setLicenseList(store.licenseListActive); }); const onLoad = async () => { if (cityQuery.default) { const ip = await requst.Location(); setLocation(ip.data); onRefresh({provinceName: ip.data}); } else { onRefresh(); } }; onLoad(); console.log('onload effect'); return () => { dispose(); }; }, [postType, store.jobLoaction, store.licenseList, store.licenseListActive]); 是这样写的。我log。了 生命周期是只执行了一次。但是onRefresh多次执行。

TallNutAlt commented 9 months ago
image
listenzz commented 9 months ago

因为你自己调了一次 onRefresh,应该用 setRefreshing(true) 来代替

TallNutAlt commented 9 months ago

好的 感谢