使用组件内的 ScrollView 反应本机滚动屏幕

Question

在我的 React Native 项目中，我有一个带有 ScrollView 的屏幕，其中包含许多已定义的区域。在同一个屏幕中，我还有一个组件可以在 ScrollView 之上创建一个浮动视图。

在这个浮动框中，我有一个按钮。如果用户单击此按钮，主屏幕应向下滚动到 ScrollView 中的特定组件。有可能吗，我该怎么做？

App.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',
  },
});

下面是指南组件。

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
      },
    });

Guide 生成的按钮漂浮在 ScrollView 上。当我点击它时，主屏幕应该向下滚动到区域 8。我不知道如何实现这一点。我已经看到一些关于在滚动上使用 ref 的线程，但找不到很好的解释。你能帮忙吗？

你可以在这里看到同样的小吃：https://snack.expo.io/lRl8ffSWo。请注意，在我的实际项目中，我没有使用 Expo。

Answer 1

您可以使用 ref 来做到这一点。 <ScrollView ref={yourRef} ... /> 和 onClick 你可以滚动到某个位置。 ref.current.scrollTo({ y: <offset> }) 但有更好的方法，您可以使用 FlatList 而不是 ScrollView，您可以只传递索引而不是偏移量。 <FlatList ref={yourRef} ... />，您可以使用 ref.current.scrollToIndex({ index: <your_index> }) 滚动到某个索引。