Блог

В настоящее время я работаю над собственным приложением react с экраном на борту, который содержит следующий тип шагового слайдера.

Я воссоздал слайдер в react native, используя анимированный (react-native) вид прокрутки, но он все еще не совсем похож на дизайн.

Моя реализация в react native. (удален ненужный код)

 const steps = [
  {
    id: 1,
    key: null,
    icon: null,
  },
  {
    id: 2,
    key: 'auth-form',
    icon: require('src/assets/icons/email.png'),
  },
  {
    id: 3,
    key: 'email-sent',
    icon: require('src/assets/icons/send.png'),
  },
  {
    id: 4,
    key: null,
    icon: null,
  },
];

const STEP_SIZE = 100;
const { width } = Dimensions.get('window');

const EMPTY_ITEM_SIZE = (width - STEP_SIZE) / 2;

return (<Animated.ScrollView
            ref={scroll}
            onScroll={Animated.event(
              [{ nativeEvent: { contentOffset: { x: scrollX } } }],
              { useNativeDriver: false },
            )}
            showsHorizontalScrollIndicator={false}
            snapToInterval={STEP_SIZE}
            horizontal
            // scrollEnabled={false}
            contentContainerStyle={styles.scrollViewContainer}
            bounces={false}>
            {steps.map((step, index) => {
              if (!step.key) {
                return <View key={index} style={{ width: EMPTY_ITEM_SIZE }} />;
              }

              const inputRange = [
                (index - 2) * STEP_SIZE,
                (index - 1) * STEP_SIZE,
                index * STEP_SIZE,
              ];

              const scale = scrollX.interpolate({
                inputRange,
                outputRange: [1, 2, 1],
              });

              return (
                <Animated.View
                  key={index}
                  style={{
                    alignItems: 'center',
                    width: STEP_SIZE,
                    transform: [{ scale }],
                  }}>
                  <Image source={step.icon} style={{width: 60, height: 60}} />
                </Animated.View>
              );
            })}
          </Animated.ScrollView>);
 

Конечный результат выглядит так:

Я не мог добиться такого уменьшения размера элемента. Любая помощь будет оценена по достоинству. Спасибо.

Понял это. Мы должны расположить круги (изображения) абсолютно и на прокрутке слайда (шириной 100%) анимировать трансальтекс круга.