[英]React Native Scrolling Screen with ScrollView from a Within a Component
In my React Native Project, I have a screen with a ScrollView, with lots of defined areas.在我的 React Native 项目中,我有一个带有 ScrollView 的屏幕,其中包含许多已定义的区域。 In the same screen, I also have a component which creates a floating view on top of the ScrollView.在同一个屏幕中,我还有一个在 ScrollView 之上创建浮动视图的组件。
In this floating box I have a button.在这个浮动框中,我有一个按钮。 If the user clicks this button, the main screen should scroll down to a specific component within the ScrollView.如果用户单击此按钮,主屏幕应向下滚动到 ScrollView 中的特定组件。 Is it possible, and how can I do it?有可能吗,我该怎么做?
App.js应用程序.js
import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, Dimensions, Pressable } from 'react-native';
import Constants from 'expo-constants';
import Guide from './components/Guide';
import { Card } from 'react-native-paper';
export default function App() {
return (
<>
<ScrollView style={styles.container}>
<Card style={{margin:20,padding:20}}>
<Text style={{textAlign:'center'}}>AREA 1</Text>
</Card>
<Card style={{margin:20,padding:20}}>
<Text style={{textAlign:'center'}}>AREA 2</Text>
</Card>
<Card style={{margin:20,padding:20}}>
<Text style={{textAlign:'center'}}>AREA 3</Text>
</Card>
<Card style={{margin:20,padding:20}}>
<Text style={{textAlign:'center'}}>AREA 4</Text>
</Card>
<Card style={{margin:20,padding:20}}>
<Text style={{textAlign:'center'}}>AREA 5</Text>
</Card>
<Card style={{margin:20,padding:20}}>
<Text style={{textAlign:'center'}}>AREA 6</Text>
</Card>
<Card style={{margin:20,padding:20}}>
<Text style={{textAlign:'center'}}>AREA 7</Text>
</Card>
<Card style={{margin:20,padding:20}}>
<Text style={{textAlign:'center'}}>AREA 8</Text>
</Card>
<Card style={{margin:20,padding:20}}>
<Text style={{textAlign:'center'}}>AREA 9</Text>
</Card>
<Card style={{margin:20,padding:20}}>
<Text style={{textAlign:'center'}}>AREA 10</Text>
</Card>
</ScrollView>
<Guide />
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: '#FFC300',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
Below is the Guide component.下面是指南组件。
Guide.js Guide.js
import * as React from 'react';
import { Text, View, StyleSheet, Image, Dimensions, Pressable } from 'react-native';
export default function Guide() {
return (
<View style={styles.context}>
<Pressable onPress={() => {
alert('This should scroll down to Area 8');
}}>
<View style={styles.blockWrapper}>
<Text style={styles.textStyle}>Scroll to Area 8</Text>
</View>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
context: {
position: 'absolute',
width: Dimensions.width,
height: Dimensions.height,
top: 0,
left: 0,
right: 0,
bottom: 10,
zIndex: 1000,
justifyContent: 'flex-end',
},
blockWrapper: {
width: '100%',
padding: 0,
backgroundColor: '#5C93D8',
paddingHorizontal: 20,
paddingVertical: 15,
// marginBottom: 20,
borderRadius: 20,
justifyContent: 'center',
minHeight:100
},
});
The button produced by Guide floats over the ScrollView. Guide 生成的按钮漂浮在 ScrollView 上。 When I click that, the main screen should scroll down to Area 8. I don't know how to make this happen.当我点击它时,主屏幕应该向下滚动到区域 8。我不知道如何实现这一点。 I've seen some threads on using ref on scroll but couldn't find a good explanation.我已经看到一些关于在滚动上使用 ref 的线程,但找不到很好的解释。 Can you please help?你能帮忙吗?
You can see the snack for the same here: https://snack.expo.io/lRl8ffSWo .你可以在这里看到同样的零食: https://snack.expo.io/lRl8ffSWo 。 Note that in my real project, I'm not using Expo.请注意,在我的实际项目中,我没有使用 Expo。
You can use ref to do that.你可以使用ref来做到这一点。 <ScrollView ref={yourRef}... />
and onClick you can scroll to some position. <ScrollView ref={yourRef}... />
和 onClick 你可以滚动到一些 position。 ref.current.scrollTo({ y: <offset> })
but there are better way, instead of ScrollView you can use FlatList where you can pass only index instead of offset. ref.current.scrollTo({ y: <offset> })
但有更好的方法,你可以使用FlatList而不是 ScrollView,你可以只传递索引而不是偏移量。 <FlatList ref={yourRef}... />
and you can scroll to some index using ref.current.scrollToIndex({ index: <your_index> })
. <FlatList ref={yourRef}... />
你可以使用ref.current.scrollToIndex({ index: <your_index> })
滚动到某个索引。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.