# react-native-safe-area-view

**Repository Path**: harmonytsc_rn/react-native-safe-area-view

## Basic Information

- **Project Name**: react-native-safe-area-view
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-20
- **Last Updated**: 2026-01-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 模板版本：v0.2.2

<p align="center">
  <h1 align="center"> <code>@ohmi/react-native-safe-area-view</code> </h1>
</p>
<p align="center">
    <a href="https://gitee.com/kunyuan-hongke/react-native-safe-area-view">
        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
    </a>
    <a href="https://gitee.com/kunyuan-hongke/react-native-safe-area-view/blob/master/LICENSE">
        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
    </a>
</p>

本项目基于 [react-native-safe-area-view](https://github.com/react-navigation/react-native-safe-area-view) 开发。

> [!TIP] [Gitee 地址](https://gitee.com/kunyuan-hongke/react-native-safe-area-view)

## 安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：[@ohmi/react-native-safe-area-view Releases](https://gitee.com/kunyuan-hongke/react-native-safe-area-view/releases) 。对于未发布到npm的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/tgz-usage.md)安装tgz包。

进入到工程目录并输入以下命令：

<!-- tabs:start -->

#### **npm**

```bash
npm install @ohmi/react-native-safe-area-view
```

#### **yarn**

```bash
yarn add @ohmi/react-native-safe-area-view
```

<!-- tabs:end -->

下面的代码展示了这个库的基本使用场景：

> [!WARNING] 使用时 import 的库名不变。

```jsx
import * as React from "react";
import { Text, View } from "react-native";
import SafeAreaView from "react-native-safe-area-view";

export default function App() {
	return (
		<SafeAreaView forceInset={{ top: "always" }}>
			<View>
				<Text>Yeah, I'm safe too!</Text>
			</View>
		</SafeAreaView>
	);
}
```

## 约束与限制

### 兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 电脑 ROM。

本文档内容基于以下版本验证通过：

1. RNOH：0.72.5; SDK：OpenHarmony 5.0.2.123(API Version 14 Release); IDE：DevEco Studio 5.0.7.200; ROM：5.0.0.130(SP6C00E130R4P28patch08);

## 属性

> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。

> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

| Name       | Description                                                                                                                                                                                      | Type   | Required | Platform | HarmonyOS Support |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | -------- | -------- | ----------------- |
| forceInset | takes an object with the keys `top \| bottom \| left \| right \| vertical \| horizontal` and the values `'always' \| 'never'`. Or you can override the padding altogether by passing an integer. | object | no       | all      | yes               |

## 遗留问题

## 其他

## 开源协议

本项目基于 [The MIT License (MIT)](https://gitee.com/kunyuan-hongke/react-native-safe-area-view/blob/master/LICENSE) ，请自由地享受和参与开源。