我一直在開發個人應用程式來構建財務應用程式。目前我正在創建一個入職螢屏，并且正在成功運行。雖然我想給它添加一些樣式，我已經創建了一個影片分頁器，但是我想讓最后一頁指示器變成一個可觸摸的按鈕。
目前分頁器看起來像這樣：
當它到達最后一個時：
我希望最后一個影片變成一個按鈕。
這是我的分頁器代碼：
import React from 'react';
import {
Container,
CurrentSelectedPageIndicator,
ButtonContainer
} from './styles';
import { useWindowDimensions } from 'react-native';
interface PaginatorProps {
data: any;
scrollX: any;
currentIndex: any;
}
export function Paginator({ data, scrollX, currentIndex }: PaginatorProps){
const { width } = useWindowDimensions();
return (
<Container>
{data.map((_: any, index: any) => {
const inputRange = [(index - 1) * width, index * width, (index 1) * width];
let dotWidth = scrollX.interpolate({
inputRange,
outputRange: [10, 20, 10],
extrapolate: 'clamp'
});
const opacity = scrollX.interpolate({
inputRange,
outputRange: [0.3, 1, 0.3],
extrapolate: 'clamp'
});
if (currentIndex.toString() === '2') {
dotWidth = scrollX.interpolate({
[1,2,3],
outputRange: [10, 20, 10],
extrapolate: 'clamp'
});
}
return <CurrentSelectedPageIndicator key={index.toString()} style={{ width: dotWidth, opacity }} />;
})}
</Container>
);
}
款式：
import { RFValue } from "react-native-responsive-fontsize";
import styled from "styled-components/native";
import { Animated } from 'react-native';
export const Container = styled.View`
flex-direction: row;
height: ${RFValue(64)}px;
`;
export const CurrentSelectedPageIndicator = styled(Animated.View).attrs({
shadowOffset: { width: 1, height: 3 }
})`
shadow-color: ${({ theme }) => theme.colors.text_dark };
elevation: 1;
shadow-opacity: 0.3;
shadow-radius: 1px;
height: ${RFValue(10)}px;
width: ${RFValue(10)}px;
border-radius: 10px;
background-color: ${({ theme }) => theme.colors.blue };
margin-horizontal: ${RFValue(8)}px;
`;
export const ButtonContainer = styled(Animated.View)`
width: 100%;
height: ${RFValue(50)}px;
background-color: ${({ theme }) => theme.colors.blue};
border-radius: 10px;
align-items: center;
justify-content: center;
`;
export const ButtonTitle = styled.Text`
font-family: ${({ theme }) => theme.fonts.medium};
font-size: ${RFValue(14)}px;
color: ${({ theme }) => theme.colors.shapeColor};
`;
我嘗試實作這個邏輯，但沒有影片。當然。
我希望它變成這樣：
這是呼叫分頁器的頁面：
import React, { useState, useRef } from 'react';
import {
Container,
FlatListContainer
} from './styles';
import {
FlatList,
Animated
} from 'react-native'
import OnboardingData from '../../utils/onboarding';
import { OnboardingItem } from '../../components/OnboardingItem';
import { Paginator } from '../../components/Paginator';
export function Onboarding(){
const [currentIndex, setCurrentIndex] = useState(0);
const scrollX = useRef(new Animated.Value(0)).current;
const onboardingDataRef = useRef(null);
const viewableItemsChanged = useRef(({ viewableItems }: any) => {
setCurrentIndex(viewableItems[0].index);
}).current;
const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
return (
<Container>
<FlatListContainer>
<FlatList
data={OnboardingData}
renderItem={({ item }) => <OnboardingItem image={item.image} title={item.title} description={item.description}/>}
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
bounces={false}
keyExtractor={(item) => String(item.id)}
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } }}], {
useNativeDriver: false
})}
scrollEventThrottle={32}
onViewableItemsChanged={viewableItemsChanged}
viewabilityConfig={viewConfig}
ref={onboardingDataRef}
/>
</FlatListContainer>
<Paginator data={OnboardingData} scrollX={scrollX} currentIndex={currentIndex}/>
</Container>
);
}
編隊錯誤：
uj5u.com熱心網友回復：
關鍵點是：
- 當我們從第頁滾動
n-1到n第頁時，- 除第 n 個指標外，所有指標都需要調整。調整可以是
- 將所有其他指標的內容 邊距縮小到 0 寬度。（首選）
- 將所有指標向左移動計算量。
- 第
nth 元素應該增長到占據整個寬度。內容還應將不透明度從 更改0為1。
- 除第 n 個指標外，所有指標都需要調整。調整可以是
考慮到這一點，Paginator 代碼的以下更改應該很容易理解。
import React from 'react';
import {
Container,
CurrentSelectedPageIndicator,
ButtonContainer,
ButtonTitle,
} from './styles';
import { useWindowDimensions } from 'react-native';
import { RFValue } from 'react-native-responsive-fontsize';
interface PaginatorProps {
data: any;
scrollX: any;
currentIndex: any;
}
const inactiveSize = RFValue(10)
const activeSize = RFValue(20)
export function Paginator({ data, scrollX, currentIndex }: PaginatorProps) {
const { width } = useWindowDimensions();
return (
<Container>
{data.map((_: any, index: any) => {
const inputRange = Array(data.length)
.fill(0)
.map((_, i) => i * width);
const isLastElement = index === data.length - 1;
const widthRange = Array(data.length)
.fill(inactiveSize)
.map((v, i) => {
if (i === data.length - 1) {
if (isLastElement) return width;
return 0;
}
if (i === index) return activeSize;
return v;
});
// optionally, reduce the length of inputRange & widthRange
// while loop may be removed
let i = 0;
while (i < inputRange.length - 1) {
if (widthRange[i] === widthRange[i 1]) {
let toRemove = -1;
if (i === 0) toRemove = i;
else if (i === inputRange.length - 2) toRemove = i 1;
else if (
i < inputRange.length - 2 &&
widthRange[i] === widthRange[i 2]
)
toRemove = i 1;
if (toRemove > -1) {
inputRange.splice(toRemove, 1);
widthRange.splice(toRemove, 1);
continue;
}
}
i ;
}
console.log(index, inputRange, widthRange);
let height = inactiveSize;
let buttonOpacity = 0;
let dotWidth = scrollX.interpolate({
inputRange,
outputRange: widthRange,
extrapolate: 'clamp',
});
const opacity = scrollX.interpolate({
inputRange,
outputRange: widthRange.map((v) => ( v? v >= activeSize ? 1 : 0.3: 0)),
extrapolate: 'clamp',
});
if (isLastElement) {
dotWidth = scrollX.interpolate({
inputRange,
outputRange: widthRange,
extrapolate: 'clamp',
});
height = dotWidth.interpolate({
inputRange: [inactiveSize, width],
outputRange: [inactiveSize, RFValue(50)],
extrapolate: 'clamp',
});
buttonOpacity = dotWidth.interpolate({
inputRange: [inactiveSize, width],
outputRange: [0, 1],
extrapolate: 'clamp',
});
}
const marginHorizontal = dotWidth.interpolate({
inputRange: [0, inactiveSize],
outputRange: [0, RFValue(8)],
extrapolate: 'clamp',
});
return (
<CurrentSelectedPageIndicator
key={index.toString()}
style={{ width: dotWidth, opacity, marginHorizontal, height }}>
{isLastElement && (
<ButtonContainer
style={{ opacity: buttonOpacity, backgroundColor: '#5636D3' }}>
<ButtonTitle style={{ color: 'white' }}>NEXT</ButtonTitle>
</ButtonContainer>
)}
</CurrentSelectedPageIndicator>
);
})}
</Container>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/442910.html
標籤：反应式 动画 CSS动画 react-native-reanimated