如何使用 3 个文本执行此日历循环滑动滚动

Posted 2023-03-04

【中文标题】如何使用 3 个文本执行此日历循环滑动滚动

【英文标题】：How to do this calendar circular swipe scroll with 3 texts

【发布时间】：2022-01-07 05:14:39

【问题描述】：

这是我的模型。

我想要这个动画：

当我向左滑动时，三月占据中心位置，四月取代右侧的三月 当我向右滑动时，1 月份位于中心位置，12 月份取代左侧的 1 月份

我真的不知道从哪里开始，也不知道如何实现。

图片中使用的代码，这里是：

import React from 'react';
import View, StyleSheet, Text, TouchableOpacity from 'react-native';

const MonthSlider = () => 
  return (
    <View
      style=
        flexDirection: 'row',
        flex: 0.2,
        paddingBottom: 100,
      >
      <View
        style=
          flexDirection: 'column',
          flex: 0.25,
          alignItems: 'center',
          marginTop: 10,
        >
        <TouchableOpacity
          style=alignItems: 'center'
          onPress=() => alert('January clicked')>
          <View style=styles.nonActiveCircle />
          <Text style=styles.nonActiveMonth>January</Text>
        </TouchableOpacity>
      </View>
      <View
        style=
          flexDirection: 'column',
          flex: 0.5,
          alignItems: 'center',
          marginTop: 10,
        >
        <View style=styles.activeCircle />
        <Text style=styles.year>2021</Text>
        <Text style=styles.activeMonth>February</Text>
      </View>
      <View
        style=
          flexDirection: 'column',
          flex: 0.25,
          marginTop: 10,
          alignItems: 'center',
        >
        <TouchableOpacity
          style=alignItems: 'center'
          onPress=() => alert('March clicked')>
          <View style=styles.nonActiveCircle />
          <Text style=styles.nonActiveMonth>March</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
;

const styles = StyleSheet.create(
  nonActiveMonth: 
    fontSize: 20,
    color: '#8BA8C3',
    fontWeight: 'bold',
  ,
  activeMonth: 
    fontSize: 30,
    color: 'white',
    fontWeight: 'bold',
  ,
  nonActiveCircle: 
    width: 8,
    height: 8,
    borderRadius: 8 / 2,
    backgroundColor: '#8BA8C3',
    marginTop: 10,
  ,
  activeCircle: 
    width: 25,
    height: 25,
    borderRadius: 25 / 2,
    backgroundColor: 'white',
    borderWidth: 5,
    borderColor: '#175287',
    bottom: 20,
    marginBottom: -20,
  ,
  year: 
    fontSize: 20,
    color: '#8BA8C3',
  ,
);

export default MonthSlider;

【参考方案1】：

也许一个好的开始是使用'react-view-slider'或'ScrollView'并做这样的事情：

import React,  useState  from 'react';
import View, StyleSheet, Text, TouchableOpacity from 'react-native';
import Swiper from 'react-native-swiper';

const MonthSlider = () => 

  // Months
  const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];

  // State iMonths
  const [ iMonth, setIMonth ] = useState(1);

  // Month click
  const MonthClick = (i) => 
    alert( months[i] +' clicked')
    setIMonth(i);
  ;

  // This function renders the view at the given index.
  const renderView = ( index, active ) => (
    months.map( (month,i) =>
      <View key=i style=styles.month + ( active == i ) ? styles.active : styles.inactive >
        <TouchableOpacity 
          style=styles.bt
          onPress=() => MonthClick(i)
        >
            <View style= active == i ? styles.activeCircle : styles.nonActiveCircle  />
            <Text style= active == i ? styles.activeMonth : styles.nonActiveMonth >month</Text>
        </TouchableOpacity>
      </View>
    )
  );

  return (
    <Swiper style=styles.monthWrapper showsButtons=false horizontal=true showsPagination=false>
      renderView(0,0)
    </Swiper>
  );
;

const styles = StyleSheet.create(
       
  /* New styles */
  monthWrapper:
    flex:0.5,
    display:'flex',
    flexDirection: 'row',
    height:'100px',
    textAlign:'center',
  ,
  bt:
    textAlign:"center"
  ,
  month:
    alignItems: 'center',
    backgroundColor: '#9DD6EB'        
  ,
  active:
    color:'#000',
    flex: 0.5,
    opacity:1,
    fontSize: 30,
    color: 'white',
    fontWeight: 'bold',      
  ,
  inactive: 
    fontSize: 20,
    color: '#8BA8C3',
    fontWeight: 'bold',
  ,
  
  /* Old styles */
  nonActiveMonth: 
    fontSize: 20,
    color: '#8BA8C3',
    fontWeight: 'bold',
  ,
  activeMonth: 
    fontSize: 30,
    color: 'white',
    fontWeight: 'bold',
  ,
  nonActiveCircle: 
    width: 12,
    height: 12,
    borderRadius: '100%',
    backgroundColor: '#8BA8C3',
    marginTop: 10,
    alignSelf:'center'
  ,
  activeCircle: 
    width: 40,
    height: 40,
    borderRadius: '100%',
    backgroundColor: 'white',
    borderWidth: 5,
    borderColor: '#175287',
    bottom: 20,
    marginBottom: -20,
  ,
);

export default MonthSlider;

【讨论】：

感谢您的回答，但我正在使用 react native，我无法安装此 react 插件当我在我的 react native 项目上运行您的代码时它不起作用

哦@ShinichiKudo 我的错。我认为这是一个反应库。让我等一下，我会在这里测试一些东西。

我的朋友我改变了导入和一点点代码。也许这种方式可以帮助你作为一个开始。

非常感谢，我会用你的答案，谢谢你的时间

没问题。我很乐意为您提供一点帮助。干杯！