Reactjs 如何在react native中创建滑动选项卡按钮

下面是使用动画创建滑动选项卡或分段组件的教程，如下所示：

const slidengtabar=（道具）=>{
常量[active，setActive]=useState（0）
常量[xTabOne，setXTabOne]=useState（0）
常量[xTabTwo，setXTabTwo]=useState（0）
const[transX，setTransX]=useState（新的动画.Value（0））
常量handleSlide=（类型）=>{
动画。春天（transX{
toValue:type，
持续时间：100
}).start（）
}
返回(

有什么建议吗？
这是一个非常简单的开始，我在这方面也很努力，但我会解决它

注：代码用于功能部件

只需将视图作为按钮容器，并在其内部像这样将其作为按钮



handleTab（“tab1”）}
style={[style.tabButton，tab.tab1&&style.tabButtonActive]}
>
表btn1
handleTab（“tab2”）}
tyle={[styles.tabButton，tab.tab2&&styles.tabButtonActive]}
>
表btn2

const SlidingTabBar = (props) => {

  const [active, setActive] = useState(0)
  const [xTabOne, setXTabOne] = useState(0)
  const [xTabTwo, setXTabTwo] = useState(0)
  const [transX, setTransX] = useState(new Animated.Value(0))

  const handleSlide = (type) => {
    Animated.spring(transX, {
      toValue: type,
      duration: 100
    }).start()
  }

  return (
    <View style={styles.screen}>
    <View style={styles.tabContainer}>
     <Animated.View style={styles.active, {transform: [{ translateX: transX}]}} />
     <TouchableOpacity onLayout={(e) => setXTabOne(e.nativeEvent.layout.x)} onPress={() => setActive(0), handleSlide(xTabOne)}><Text>tab one</Text></TouchableOpacity>
     <TouchableOpacity onLayout={(e) => setXTabTwo(e.nativeEvent.layout.x)} onPress={() => setActive(1), handleSlide(xTabTwo)}><Text>tab 2</Text></TouchableOpacity>
    </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  tabContainer: {
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: 'blue',
    width: 300,
    justifyContent: 'space-around',
    position: 'relative',
  },
  active: {
    position: 'absolute',
    backgroundColor: 'lightblue',
    width: '50%',
    height: '100%',
    left: 0,
    top: 0
  }
})