Я создаю точки разбивки на страницы, чтобы показать количество содержимого плоского списка, но проблема в том, что перевод не плавный, вот мой код для точек.
Dots.js
import React from 'react';
import {
Animated,
StyleSheet,
useWindowDimensions,
View,
ViewStyle,
} from 'react-native';
import { colors } from '../../global_constants/colors';
export interface ScalingDotProps {
data: Array<Object>;
scrollX: Animated.Value;
containerStyle?: ViewStyle;
dotStyle?: ViewStyle;
inActiveDotOpacity?: number;
inActiveDotColor?: string;
activeDotScale?: number;
activeDotColor?: string;
}
export const ScalingDot = ({
scrollX,
data,
dotStyle,
containerStyle,
inActiveDotOpacity,
inActiveDotColor,
activeDotScale,
activeDotColor,
}: ScalingDotProps) => {
const { width } = useWindowDimensions();
const defaultProps = {
inActiveDotColor: inActiveDotColor || '#347af0',
activeDotColor: activeDotColor || '#347af0',
animationType: 'scale',
inActiveDotOpacity: inActiveDotOpacity || 0.5,
activeDotScale: activeDotScale || 1.4,
};
return (
<View style={[styles.containerStyle, containerStyle]}>
{data.map((_, index) => {
const inputRange = [
(index - 1) * width,
index * width,
(index + 1) * width,
];
const colour = scrollX.interpolate({
inputRange,
outputRange: [
defaultProps.inActiveDotColor,
defaultProps.activeDotColor,
defaultProps.inActiveDotColor,
],
extrapolate: 'clamp',
});
const opacity = scrollX.interpolate({
inputRange,
outputRange: [
defaultProps.inActiveDotOpacity,
1,
defaultProps.inActiveDotOpacity,
],
extrapolate: 'clamp',
});
const scale = scrollX.interpolate({
inputRange: inputRange,
outputRange: [1, defaultProps.activeDotScale, 1],
extrapolate: 'clamp',
});
return (
<Animated.View
key={`dot-${index}`}
style={[
styles.dotStyle,
{ opacity },
{ transform: [{ scale }] },
dotStyle,
{backgroundColor: colors.primary}
// { backgroundColor: colour },
]}
/>
);
})}
</View>
);
};
const styles = StyleSheet.create({
containerStyle: {
position: 'absolute',
bottom: 20,
paddingBottom: 2,
flexDirection: 'row',
alignSelf: 'center',
},
dotStyle: {
width: 5,
height: 5,
borderRadius: 5/2,
marginHorizontal: 5,
},
});
Я хочу, чтобы анимация работала со скоростью 60 кадров в секунду, я использовал плоский список для рендеринга данных и включил разбиение на страницы.
Используя значение scrollX плоского списка, чтобы изменить активный статус точек.
0
Dipan Sharma
15 Май 2021 в 14:38
1 ответ
Лучший ответ
Решение:
useNativeDriver: true
0
Dipan Sharma
20 Май 2021 в 16:39
Похожие вопросы
Новые вопросы
react-native
React native - это библиотека JavaScript, используемая для создания собственных мобильных приложений с использованием React. В центре внимания React Native - эффективность работы разработчиков на всех платформах, которые вам интересны - учитесь один раз, пишите где угодно.