ScrollView программно прокручивается при нажатии кнопки в реакции на родной

Поэтому я вручную создал встроенный экран в React Native с помощью ScrollView, а также добавил кнопку, помеченную рядом, чтобы позволить скрытому экрану перемещаться по экрану. Теперь моя задача состоит в том, как я могу программно сделать прокрутку ScrollView при нажатии кнопки. Ниже приведен пример функционального компонента, в котором я пробовал свои силы, но я понятия не имею, как я буду реализовывать прокрутку нажатия кнопки.

export default function Onbaording({ navigation }) {
  const [sliderState, setSliderState] = React.useState({ currentPage: 0 });
  const { width, height } = Dimensions.get("window");

  const setSliderPage = (event) => {
    const { currentPage } = sliderState;
    const { x } = event.nativeEvent.contentOffset;
    const indexOfNextScreen = Math.floor(x / width);
    if (indexOfNextScreen !== currentPage) {
      setSliderState({
        ...sliderState,
        currentPage: indexOfNextScreen,
      });
    }
  };

  const { currentPage: pageIndex } = sliderState;

  return (
    <View style = {Styles.container}>
      <SafeAreaView style = {{ flex: 4 }}>
        <ScrollView
          horizontal = {true}
          scrollEventThrottle = {16}
          pagingEnabled = {true}
          showsHorizontalScrollIndicator = {false}
          snapToStart = {true}
          onScroll = {(event: any) => {
            setSliderPage(event);
          }}
        >
          <View style = {{ width, height, paddingHorizontal: 16 }}>
            <View style = {Styles.Svg}>
              <WelcomeSvg1 />
            </View>

            <Text style = {Styles.text}>Onboarding</Text>
            <Text>
              Done with React Native.
            </Text>
          </View>

          <View style = {{ width, paddingHorizontal: 16 }}>
            <View style = {Styles.Svg}>
              <WelcomeSvg2 />
            </View>

            <Text style = {Styles.text}>Onboarding</Text>
            <Text>
              Done with React Native.
            </Text>
          </View>
        </ScrollView>


          <View style = {Styles.paginationWrapper}>
            {Array.from(Array(2).keys()).map((key, index) => (
              <View
                style = {[
                  Styles.paginationDots,
                  {
                    backgroundColor:
                      pageIndex === index ? "#51668F" : "#EAEAEA",
                  },
                ]}
                key = {index}
              />
            ))}
          </View>
      </SafeAreaView>

      <View>
          <View
            style = {{ flexDirection: "row", justifyContent: "space-between" }}
          >
            <TouchableOpacity
              onPress = {() => {
                navigation.navigate("Signin");
              }}
            >
              <Text>Skip</Text>
            </TouchableOpacity>

            <TouchableOpacity>
              <Text>Next</Text>
            </TouchableOpacity>
          </View>
      </View>
    </View>
  );
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
9
0
12 065
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете назначить ref своему ScrollView. Эта ссылка содержит функцию под названием scrollTo().

Сначала определите ссылку: const scrollViewRef = useRef(null); (https://reactjs.org/docs/hooks-reference.html#useref)

Затем добавьте ссылку в ScrollView:

<ScrollView
   ref = {scrollViewRef}
>
</ScrollView>

Теперь все, что нам нужно сделать, это прокрутить ScrollView до нужной позиции. Есть несколько способов сделать это. Мне нравится отслеживать индекс/номер страницы для расчета следующей позиции прокрутки. Вы также можете использовать FlatList.

Итак, вы можете сделать что-то подобное на своем TouchableOpacity вокруг Next:

const toNextPage = () => {
   screenIndex += 1;
   scrollViewRef.current?.scrollTo({x: window.width * screenIndex, animated: true});
};

onPress = {toNextPage}

См. https://reactnative.dev/docs/scrollview#scrollto для получения дополнительной информации о scrollTo()

это было показать ошибку в screenIndex += 1;. поэтому я изменил на screenIndex = pageIndex + 1;, и это работает для меня

Abhra 11.04.2023 23:56

Конечно, зависит от типа значения screenIndex. Это может быть состояние или общее значение. Просто обратите внимание, что некоторое значение, представляющее индекс, должно обновляться.

Kipnoedels 12.04.2023 09:27

Другие вопросы по теме