如何用react-native-scroll-into-view实现按钮点击滚动到指定区域

步骤1：安装依赖 #

首先安装react-native-scroll-into-view库：

npm install react-native-scroll-into-view --save
# 或使用yarn
yarn add react-native-scroll-into-view

步骤2：修改App.js代码 #

以下是完整的修改后代码，关键改动已标注：

import React, { useRef } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {
  Dimensions,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import Button from '../custom-components/Button';
// 引入库提供的ScrollView和滚动方法
import { ScrollView as ScrollIntoViewScrollView, scrollIntoView } from 'react-native-scroll-into-view';

// 模拟自定义组件（实际项目中替换为你的真实组件）
const ScreenA = ({ id, style }) => (
  <View style={style} id={id}>
    <Text>ScreenA 内容区域</Text>
  </View>
);
const ScreenB = ({ id, style }) => (
  <View style={style} id={id}>
    <Text>ScreenB 内容区域</Text>
  </View>
);

const App = ({ navigation }) => {
  // 创建ScrollView的引用
  const scrollViewRef = useRef(null);

  // 定义滚动到对应组件的方法
  const scrollToScreenA = () => {
    scrollIntoView(scrollViewRef, 'screenA');
  };

  const scrollToScreenB = () => {
    scrollIntoView(scrollViewRef, 'screenB');
  };

  return (
    <View style={{flex: 1}}>
      <View style={{ alignItems: "center", paddingVertical: 10 }}>
        <View style={{ flexDirection: "row", gap: 10 }}>
          <Button
            title="ScreenA"
            stylebtn={styles.btns}
            stylebtntitle={styles.btnsTxt}
            onPress={scrollToScreenA}
          />
          <Button
            title="ScreenB"
            stylebtn={styles.btns}
            stylebtntitle={styles.btnsTxt}
            onPress={scrollToScreenB}
          />
        </View>
      </View>
      {/* 使用库提供的ScrollView并绑定ref */}
      <ScrollIntoViewScrollView ref={scrollViewRef} style={{flex:1}}>
        {/* 给目标组件添加唯一id作为滚动标识 */}
        <ScreenA style={styles.screen} id="screenA"/>
        <ScreenB style={styles.screen} id="screenB"/>
      </ScrollIntoViewScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    backgroundColor: 'yellow',
    justifyContent: 'center',
    alignItems: 'center',
    height: Dimensions.get('window').height, // 设置足够高度确保滚动可见
  },
  btns: {
    paddingHorizontal: 20,
    paddingVertical: 8,
    backgroundColor: '#007AFF',
    borderRadius: 8
  },
  btnsTxt: {
    color: 'white',
    fontSize: 16
  }
});

export default App;

核心改动说明 #

• 替换原生ScrollView为库提供的ScrollIntoViewScrollView，并绑定ref用于控制滚动行为
• 给ScreenA、ScreenB组件添加唯一id属性，作为滚动定位的目标标识
• 定义滚动方法，调用scrollIntoView并传入ScrollView的ref和目标组件id
• 修正按钮onPress事件，绑定对应的滚动方法
• 给组件设置全屏高度，确保滚动效果可测试

额外说明 #

• 如果你的自定义组件无法直接接收id属性，需要在组件内部将id传递给根View
• 可自定义滚动动画：scrollIntoView(scrollViewRef, 'screenA', {animated: true, duration: 500})

内容的提问来源于stack exchange，提问作者Jason0011