# ReactNativeScrollNested

**Repository Path**: scenario-samples/react-native-scroll-nested

## Basic Information

- **Project Name**: ReactNativeScrollNested
- **Description**: 在应用开发中，会遇到嵌套滚动的场景。Scrollview用于在屏幕上显示可滚动的内容。它可以包含任意数量的子组件，并且支持水平和垂直滚动。

本示例使用@react-native-safe-area-context实现导航栏规避。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-04
- **Last Updated**: 2026-01-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 在RN中使用Scrollview组件实现嵌套滚动demo

## 场景介绍

在应用开发中，会遇到嵌套滚动的场景。[Scrollview](https://reactnative.cn/docs/scrollview)用于在屏幕上显示可滚动的内容。它可以包含任意数量的子组件，并且支持水平和垂直滚动。

本示例使用[@react-native-safe-area-context](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-safe-area-context.md)实现导航栏规避。

## 效果预览

<img src="screenshots/ReactNativeScrollNested.gif" width="200">

## 实现思路

1. 通过Scrollview组件展示整个页面的内容，并且允许整体页面上下滚动。在页面中，再嵌入了一个内层的Scrollview组件。

```
    <ScrollView style={styles.outerScrollView}>
      {/* 外层 ScrollView 内容 */}
      <View style={styles.section}>
        <Text style={styles.header}>外层滚动区域</Text>
        {[...Array(20).keys()].map((i) => (
          <Text key={i} style={styles.text}>
            外层内容 {i + 1}
          </Text>
        ))}
      </View>
    
      {/* 内层 ScrollView */}
      <View style={styles.section}>
        <Text style={styles.header}>内层滚动区域</Text>
        <ScrollView style={styles.innerScrollView}>
          {/* 内层 ScrollView 内容，增加到50条 */}
          {[...Array(50).keys()].map((i) => (
            <Text key={i} style={styles.text}>
              内层内容 {i + 1}
            </Text>
          ))}
        </ScrollView>
      </View>
    </ScrollView>
```

## 约束与限制

- 本示例支持API Version 20 Release及以上版本。
- 本示例支持HarmonyOS 6.0 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 6.0 Release及以上版本进行编译运行。
- 本示例使用0.72.5版本RNOH。

## 工程目录

```
ReactNativeScrollNested                        // RN工程
├──harmony                                       // harmony工程
│  ├──entry/src/main/cpp                         // native相关配置
│  │  ├──generated                               // codegen自动生成的桥接代码
│  │  ├──CMakeLists.txt
│  │  └──PackageProvider.cpp
│  ├──entry/src/main/ets
│  │  ├──entryability
│  │  │  └──EntryAbility.ets
│  │  ├──entrybackupability
│  │  │  └──entrybackupability.ets 
│  │  ├──pages
│  │  │  └──Index.ets                            // harmony侧入口
│  │  └──RNPackagesFactory.ets
│  └──entry/src/main/resources/rawfile           // bundle、静态资源存放目录
├──App.tsx                                       // 浏览网页时支持侧滑返回上一页&&导航栏规避
├──index.js                                      // 入口文件
├──metro.config.js                               // 打包配置
```

## 参考文档
[Scrollview](https://reactnative.cn/docs/scrollview)
[@react-native-safe-area-context](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-safe-area-context.md)