连续快速点击多个tab标签的时候会崩溃
neverlist opened this issue · comments
Describe the bug
我用的是4.0.0-rc.9 用的是CollapsibleHeaderTabView设置了lazy scrollEnabled 在连续快速点击多个tab标签的时候会崩溃
Expected behavior
<CollapsibleHeaderTabView
lazy
onStartRefresh={onStartRefresh}
isRefreshing={refreshing}
renderRefreshControl={(refreshProps: RefreshControlProps) => {
return <CustomRefreshControl {...refreshProps} />;
}}
renderTabBar={props => (
<TabBar
{...props}
scrollEnabled
tabStyle={{
height: setHeight(35),
width: 'auto',
justifyContent: 'center',
alignItems: 'center',
}}
inactiveColor={'#888'}
activeColor={'#111'}
indicatorStyle={{backgroundColor: 'orange', height: setHeight(3)}}
style={{backgroundColor: '#f4f4f4'}}
/>
)}
renderScrollHeader={_renderScrollHeader}
navigationState={{index, routes}}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
Package versions
"react": "17.0.1",
"react-native": "0.64.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-head-tab-view": "^4.0.0-rc.9",
"react-native-tab-view": "^3.0.1",
"react-native-tab-view-collapsible-header": "^2.0.1",
补充下是在Android上测试的，可以直接用下面代码试试，连续快速点击tab标签
import * as React from 'react';
import {View, StyleSheet, Dimensions} from 'react-native';
import {SceneMap} from 'react-native-tab-view';
import {HScrollView} from 'react-native-head-tab-view';
import {CollapsibleHeaderTabView} from 'react-native-tab-view-collapsible-header';
const FirstRoute = () => (
<View style={[styles.scene, {backgroundColor: '#ff4081'}]} />
);
const SecondRoute = () => (
<View style={[styles.scene, {backgroundColor: '#673ab7'}]} />
);
const SecondRoute2 = () => (
<View style={[styles.scene, {backgroundColor: 'orange'}]} />
);
const SecondRoute3 = () => (
<View style={[styles.scene, {backgroundColor: 'red'}]} />
);
const SecondRoute4 = () => (
<View style={[styles.scene, {backgroundColor: 'blue'}]} />
);
const initialLayout = {width: Dimensions.get('window').width};
export default function ChatScreen() {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{key: 'first', title: 'First'},
{key: 'second', title: 'Second'},
{key: 'second2', title: 'Second2'},
{key: 'second3', title: 'Second3'},
{key: 'second4', title: 'Second4'},
]);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
second2: SecondRoute2,
second3: SecondRoute3,
second4: SecondRoute3,
});
return (
<CollapsibleHeaderTabView
lazy
renderScrollHeader={() => (
<View style={{height: 200, backgroundColor: 'red'}} />
)}
navigationState={{index, routes}}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}
const styles = StyleSheet.create({
scene: {
flex: 1,
},
});
@neverlist 收到～
@neverlist 应该是已经解决了，在rc.10中。
还是一样 ，还是用上面代码测试的，点击标签会报下面的错
补充下我是升级到了rc.11
再补充下用上面代码只要点击标签就会报截图的错，不用连续快速点击标签
补充下我是升级到了rc.11
你试试看看能否运行下面这段react-native-reanimated的demo。
如果还是报错的话，尝试检查react-native-reanimated的安装环境，例如删掉node_modules重装，以及
npm start -- --reset-cache
import Animated, {
useSharedValue,
withTiming,
Easing,
useAnimatedStyle,
withRepeat,
withSequence,
} from 'react-native-reanimated';
import { View, Button, StyleSheet, Alert } from 'react-native';
import React, { useEffect } from 'react';
const ANGLE = 9;
const TIME = 100;
const EASING = Easing.elastic(1.5);
function WobbleExample(): React.ReactElement {
const rotation = useSharedValue(1);
const testWorklet = () => {
'worklet'
}
useEffect(() => {
testWorklet()
}, [])
const style = useAnimatedStyle(() => {
return {
transform: [{ rotateZ: `${rotation.value}deg` }],
};
});
return (
<View
style={{
flex: 1,
flexDirection: 'column',
}}>
<Animated.View style={[styles.box, style]} />
<Button
title="start"
onPress={() => {
rotation.value = withSequence(
// deviate left to start from -ANGLE
withTiming(-ANGLE, { duration: TIME / 2, easing: EASING }),
// wobble between -ANGLE and ANGLE 7 times
withRepeat(
withTiming(ANGLE, {
duration: TIME,
easing: EASING,
}),
7,
true
),
// go back to 0 at the end
withTiming(0, { duration: TIME / 2, easing: EASING })
);
}}
/>
</View>
);
}
const styles = StyleSheet.create({
box: {
width: 80,
height: 80,
alignSelf: 'center',
margin: 50,
borderRadius: 15,
backgroundColor: '#001a72',
},
});
export default WobbleExample;