# react-native: useLocaleDirection
URL: https://generaltranslation.com/zh/docs/react-native/api/helpers/use-locale-direction.mdx
---
title: useLocaleDirection
description: useLocaleDirection 钩子 的 API 参考
---

{/* 自动生成：请勿直接编辑。请改为编辑 content/docs-templates/ 中的模板。 */}


## 概述

`useLocaleDirection` Hook会从 [`<GTProvider>` 上下文](/docs/react-native/api/components/gtprovider) 中获取当前或指定区域设置的文本方向 (`'ltr'` 或 `'rtl'`) 。

<Callout>
  `useLocaleDirection` 是一个客户端Hook，*只能在客户端组件中使用*。
  请确保你的应用已包裹在 [`<GTProvider>`](/docs/react-native/api/components/gtprovider) 中。
</Callout>

## 参考

### 参数

| 参数       | 类型             | 描述                                                        |
| -------- | -------------- | --------------------------------------------------------- |
| `locale` | `string` (可选)  | BCP 47 区域设置代码 (例如 `'ar'`、`'en-US'`) 。如果省略，则使用当前上下文中的区域设置。 |

### 返回值

`'ltr' | 'rtl'` — 该区域设置对应的文本方向。

***

## 示例

### 获取当前区域设置的文本方向

```jsx title="DirectionWrapper.jsx" copy
'use client';
import { useLocaleDirection } from 'gt-react-native';

export default function DirectionWrapper({ children }) {
  const dir = useLocaleDirection(); // [!code highlight]
  return <div dir={dir}>{children}</div>;
}
```


### 获取特定区域设置的文本方向

```jsx title="SpecificDirection.jsx" copy
'use client';
import { useLocaleDirection } from 'gt-react-native';

export default function SpecificDirection() {
  const dir = useLocaleDirection('ar'); // 'rtl' [!code highlight]
  return <p>Arabic text direction: {dir}</p>;
}
```

***


## 说明

* 这个 Hook 始终是同步的。
* 可用于给元素设置 `dir` 属性，以支持 RTL。

## 后续步骤