Поэтому я вручную создал встроенный экран в 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>
);
}
Вы можете назначить 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
. Это может быть состояние или общее значение. Просто обратите внимание, что некоторое значение, представляющее индекс, должно обновляться.
это было показать ошибку в
screenIndex += 1;
. поэтому я изменил наscreenIndex = pageIndex + 1;
, и это работает для меня