Question

我试图做一个像这样的滑动选择器来动画。如果是这样，请有人可以帮助我，因为我正在努力了解如何去做。是带有一个动画的两个按钮还是？请有人告诉我怎么做。

这就是我想要做的

但是当我在中间选项卡上选择时，第三个选项卡就会选择。我不知道该如何解决。请你帮我一下。

App.js组件

import React from 'react'
import { StyleSheet, Text, View, Dimensions, Image } from 'react-native'
const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;
import TimeSlider from '../../Components/TimeSlider';
import { useState } from 'react';

const GetStarted = (props) => {
    const [selectedTab, setSelectedTab] = useState(0)

    const selectTab = tabIndex =>{
        setSelectedTab(tabIndex)
    }
    return (
        <View style={styles.container}>
            <View style={[{marginTop: HEIGHT*0.1}, styles.selector]}>
                <TimeSlider 
                    text='Breakfast'
                    isSelected={selectedTab ==0?true:false}
                    onSelect={() => selectTab(0)}
                />
                <TimeSlider 
                    text='Lunch'
                    isSelected={selectedTab ==1?true:false}
                    onSelect={() => selectTab(1)}
                />
                <TimeSlider 
                    text='Dinner'
                    isSelected={selectedTab ==1?true:false}
                    onSelect={() => selectTab(0)}
                />
            </View>
            
        </View>
    )
}

export default GetStarted

TimeSlider组件

import React,{useState} from 'react'
import { StyleSheet, Text, View,  Dimensions } from 'react-native'
import Colors from '../constants/colors'
import { TouchableOpacity } from 'react-native-gesture-handler';
const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;

const TimeSlider = ({isSelected, text, onSelect}) => {
    return (
        
        <View style={styles.conatiner}>
            <TouchableOpacity onPress={onSelect}>
            <Text style={
                {
                    color: isSelected?'white': Colors.grey, 
                    textAlignVertical:'center',
                    backgroundColor:isSelected? Colors.orange: 'transparent',
                    width:WIDTH*0.33,
                    borderRadius:WIDTH*0.9,
                    height:HEIGHT*0.08,
                    textAlign:'center' 
                }}>{text}</Text>
            </TouchableOpacity>
        </View>
    )
}

export default TimeSlider

const styles = StyleSheet.create({
    conatiner: {
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        
    }
})

React-Native标签栏

0 个答案: