0
# @tarojs/taro-rn
1

2
@tarojs/taro-rn is the React Native implementation layer for the Taro cross-platform framework, providing React Native-specific APIs and utilities that enable Taro applications to run on React Native platforms. It exposes a comprehensive set of APIs including navigation, UI controls, device capabilities, network functionality, and platform-specific utilities for cross-platform mobile development.
3

4
## Package Information
5

6
- **Package Name**: @tarojs/taro-rn
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @tarojs/taro-rn`
10

11
## Core Imports
12

13
```typescript
14
import Taro from "@tarojs/taro-rn";
15
```
16

17
For named imports:
18

19
```typescript
20
import { 
21
  navigateTo, 
22
  showToast, 
23
  request, 
24
  getSystemInfo,
25
  getStorage,
26
  useDidShow 
27
} from "@tarojs/taro-rn";
28
```
29

30
CommonJS:
31

32
```javascript
33
const Taro = require("@tarojs/taro-rn");
34
const { navigateTo, showToast, request } = require("@tarojs/taro-rn");
35
```
36

37
## Basic Usage
38

39
```typescript
40
import Taro from "@tarojs/taro-rn";
41

42
// Navigation
43
await Taro.navigateTo({ url: '/pages/detail/index' });
44

45
// Show UI feedback
46
await Taro.showToast({ 
47
  title: 'Success!', 
48
  icon: 'success' 
49
});
50

51
// Make network request
52
const response = await Taro.request({
53
  url: 'https://api.example.com/data',
54
  method: 'GET'
55
});
56

57
// Get device information
58
const systemInfo = await Taro.getSystemInfo();
59

60
// Storage operations
61
await Taro.setStorage({ key: 'user', data: { id: 1, name: 'John' } });
62
const userData = await Taro.getStorage({ key: 'user' });
63
```
64

65
## Architecture
66

67
@tarojs/taro-rn is built around several key architectural components:
68

69
- **API Layer**: Re-exports core navigation and lifecycle APIs from `@tarojs/runtime-rn`
70
- **Library Layer**: React Native-specific implementations for device, network, storage, and media APIs
71
- **Callback Pattern**: Standardized callback-based API with `success`, `fail`, and `complete` handlers
72
- **Promise Support**: All APIs return Promises for modern async/await usage
73
- **React Hooks**: Lifecycle and state management hooks for React components
74
- **Type Safety**: Full TypeScript support with comprehensive type definitions
75

76
## Capabilities
77

78
### Navigation & Routing
79

80
Core navigation functionality for page routing, tab management, and navigation bar control in Taro React Native applications.
81

82
```typescript { .api }
83
function navigateTo(options: { url: string }): Promise<TaroGeneral.CallbackResult>;
84
function navigateBack(options?: { delta?: number }): Promise<TaroGeneral.CallbackResult>;
85
function redirectTo(options: { url: string }): Promise<TaroGeneral.CallbackResult>;
86
function reLaunch(options: { url: string }): Promise<TaroGeneral.CallbackResult>;
87
function switchTab(options: { url: string }): Promise<TaroGeneral.CallbackResult>;
88
```
89

90
[Navigation & Routing](./navigation.md)
91

92
### User Interface APIs
93

94
Comprehensive UI control APIs for displaying toasts, modals, action sheets, and managing screen properties.
95

96
```typescript { .api }
97
function showToast(options: {
98
  title: string;
99
  icon?: 'success' | 'error' | 'loading' | 'none';
100
  image?: string;
101
  duration?: number;
102
}): Promise<TaroGeneral.CallbackResult>;
103

104
function showModal(options: {
105
  title?: string;
106
  content?: string;
107
  showCancel?: boolean;
108
  cancelText?: string;
109
  confirmText?: string;
110
}): Promise<{ confirm: boolean; cancel: boolean }>;
111
```
112

113
[User Interface APIs](./ui-apis.md)
114

115
### Storage APIs
116

117
Local storage management with both synchronous and asynchronous operations for persistent data storage.
118

119
```typescript { .api }
120
function getStorage(options: { key: string }): Promise<{ data: any }>;
121
function setStorage(options: { key: string; data: any }): Promise<TaroGeneral.CallbackResult>;
122
function getStorageSync(key: string): any;
123
function setStorageSync(key: string, data: any): void;
124
```
125

126
[Storage APIs](./storage.md)
127

128
### Network APIs
129

130
HTTP request functionality and WebSocket connection management for network communication.
131

132
```typescript { .api }
133
function request<T = any>(options: {
134
  url: string;
135
  data?: any;
136
  header?: Record<string, string>;
137
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'OPTIONS';
138
  dataType?: 'json' | 'text';
139
  responseType?: 'text' | 'arraybuffer';
140
}): Taro.RequestTask<T>;
141
```
142

143
[Network APIs](./network.md)
144

145
### Device & System APIs
146

147
Device information, system capabilities, and platform-specific functionality access.
148

149
```typescript { .api }
150
function getSystemInfo(): Promise<{
151
  brand: string;
152
  model: string;
153
  system: string;
154
  platform: string;
155
  screenWidth: number;
156
  screenHeight: number;
157
  windowWidth: number;
158
  windowHeight: number;
159
}>;
160
```
161

162
[Device & System APIs](./device-system.md)
163

164
### Media APIs
165

166
Image, video, and audio management including camera access, media selection, and file operations.
167

168
```typescript { .api }
169
function chooseImage(options?: {
170
  count?: number;
171
  sizeType?: ('original' | 'compressed')[];
172
  sourceType?: ('album' | 'camera')[];
173
}): Promise<{ tempFilePaths: string[]; tempFiles: any[] }>;
174
```
175

176
[Media APIs](./media.md)
177

178
### Location & Sensor APIs
179

180
Geolocation services and device sensor access including accelerometer, gyroscope, and device motion.
181

182
```typescript { .api }
183
function getLocation(options?: {
184
  type?: 'wgs84' | 'gcj02';
185
  altitude?: boolean;
186
}): Promise<{
187
  latitude: number;
188
  longitude: number;
189
  speed: number;
190
  accuracy: number;
191
}>;
192
```
193

194
[Location & Sensor APIs](./location-sensors.md)
195

196
### File System APIs
197

198
File management operations for reading, writing, and managing local files.
199

200
```typescript { .api }
201
function getFileSystemManager(): FileSystemManager;
202

203
interface FileSystemManager {
204
  readFile(options: { filePath: string; encoding?: string }): Promise<{ data: string | ArrayBuffer }>;
205
  writeFile(options: { filePath: string; data: string | ArrayBuffer; encoding?: string }): Promise<TaroGeneral.CallbackResult>;
206
}
207
```
208

209
[File System APIs](./file-system.md)
210

211
### React Hooks
212

213
Lifecycle and state management hooks for React components in Taro applications.
214

215
```typescript { .api }
216
function useDidShow(callback: () => void): void;
217
function useDidHide(callback: () => void): void;
218
function useLaunch(callback: (options: any) => void): void;
219
function useRouter(): { params: Record<string, string>; path: string };
220
```
221

222
[React Hooks](./hooks.md)
223

224
## Types
225

226
```typescript { .api }
227
namespace TaroGeneral {
228
  interface CallbackResult {
229
    errMsg: string;
230
  }
231
}
232

233
interface RequestTask<T> extends Promise<T> {
234
  abort(): void;
235
}
236
```