0
# Navigation & Routing
1

2
Navigation and routing functionality for page navigation, tab management, and navigation bar control in Taro React Native applications.
3

4
## Capabilities
5

6
### Page Navigation
7

8
Navigate between pages in the application with various transition types.
9

10
```typescript { .api }
11
/**
12
 * Navigate to a new page while keeping current page in the page stack
13
 * @param options Navigation options
14
 */
15
function navigateTo(options: {
16
  url: string;
17
  success?: (res: TaroGeneral.CallbackResult) => void;
18
  fail?: (res: TaroGeneral.CallbackResult) => void;
19
  complete?: (res: TaroGeneral.CallbackResult) => void;
20
}): Promise<TaroGeneral.CallbackResult>;
21

22
/**
23
 * Navigate back to previous page(s) in the page stack
24
 * @param options Back navigation options
25
 */
26
function navigateBack(options?: {
27
  delta?: number;
28
  success?: (res: TaroGeneral.CallbackResult) => void;
29
  fail?: (res: TaroGeneral.CallbackResult) => void;
30
  complete?: (res: TaroGeneral.CallbackResult) => void;
31
}): Promise<TaroGeneral.CallbackResult>;
32

33
/**
34
 * Redirect to a page, replacing the current page
35
 * @param options Redirect options
36
 */
37
function redirectTo(options: {
38
  url: string;
39
  success?: (res: TaroGeneral.CallbackResult) => void;
40
  fail?: (res: TaroGeneral.CallbackResult) => void;
41
  complete?: (res: TaroGeneral.CallbackResult) => void;
42
}): Promise<TaroGeneral.CallbackResult>;
43

44
/**
45
 * Relaunch the app with a new page stack, clearing all previous pages
46
 * @param options Relaunch options
47
 */
48
function reLaunch(options: {
49
  url: string;
50
  success?: (res: TaroGeneral.CallbackResult) => void;
51
  fail?: (res: TaroGeneral.CallbackResult) => void;
52
  complete?: (res: TaroGeneral.CallbackResult) => void;
53
}): Promise<TaroGeneral.CallbackResult>;
54

55
/**
56
 * Switch to a tab page (for tab bar applications)
57
 * @param options Tab switch options
58
 */
59
function switchTab(options: {
60
  url: string;
61
  success?: (res: TaroGeneral.CallbackResult) => void;
62
  fail?: (res: TaroGeneral.CallbackResult) => void;
63
  complete?: (res: TaroGeneral.CallbackResult) => void;
64
}): Promise<TaroGeneral.CallbackResult>;
65
```
66

67
**Usage Examples:**
68

69
```typescript
70
import { navigateTo, navigateBack, redirectTo } from "@tarojs/taro-rn";
71

72
// Navigate to a new page
73
await navigateTo({ 
74
  url: '/pages/detail/index?id=123' 
75
});
76

77
// Navigate back 2 pages
78
await navigateBack({ delta: 2 });
79

80
// Redirect to login page
81
await redirectTo({ 
82
  url: '/pages/login/index' 
83
});
84
```
85

86
### Page Management
87

88
Manage the current page stack and scroll position.
89

90
```typescript { .api }
91
/**
92
 * Get the current page stack
93
 * @returns Array of current pages
94
 */
95
function getCurrentPages(): any[];
96

97
/**
98
 * Scroll the page to a specific position
99
 * @param options Scroll options
100
 */
101
function pageScrollTo(options: {
102
  scrollTop: number;
103
  duration?: number;
104
  success?: (res: TaroGeneral.CallbackResult) => void;
105
  fail?: (res: TaroGeneral.CallbackResult) => void;
106
  complete?: (res: TaroGeneral.CallbackResult) => void;
107
}): Promise<TaroGeneral.CallbackResult>;
108
```
109

110
### Tab Bar Management
111

112
Control tab bar visibility and styling for tab-based applications.
113

114
```typescript { .api }
115
/**
116
 * Show the tab bar
117
 * @param options Show tab bar options
118
 */
119
function showTabBar(options?: {
120
  animation?: boolean;
121
  success?: (res: TaroGeneral.CallbackResult) => void;
122
  fail?: (res: TaroGeneral.CallbackResult) => void;
123
  complete?: (res: TaroGeneral.CallbackResult) => void;
124
}): Promise<TaroGeneral.CallbackResult>;
125

126
/**
127
 * Hide the tab bar
128
 * @param options Hide tab bar options
129
 */
130
function hideTabBar(options?: {
131
  animation?: boolean;
132
  success?: (res: TaroGeneral.CallbackResult) => void;
133
  fail?: (res: TaroGeneral.CallbackResult) => void;
134
  complete?: (res: TaroGeneral.CallbackResult) => void;
135
}): Promise<TaroGeneral.CallbackResult>;
136

137
/**
138
 * Set a badge text on a tab item
139
 * @param options Badge options
140
 */
141
function setTabBarBadge(options: {
142
  index: number;
143
  text: string;
144
  success?: (res: TaroGeneral.CallbackResult) => void;
145
  fail?: (res: TaroGeneral.CallbackResult) => void;
146
  complete?: (res: TaroGeneral.CallbackResult) => void;
147
}): Promise<TaroGeneral.CallbackResult>;
148

149
/**
150
 * Remove the badge from a tab item
151
 * @param options Remove badge options
152
 */
153
function removeTabBarBadge(options: {
154
  index: number;
155
  success?: (res: TaroGeneral.CallbackResult) => void;
156
  fail?: (res: TaroGeneral.CallbackResult) => void;
157
  complete?: (res: TaroGeneral.CallbackResult) => void;
158
}): Promise<TaroGeneral.CallbackResult>;
159

160
/**
161
 * Show a red dot on a tab item
162
 * @param options Red dot options
163
 */
164
function showTabBarRedDot(options: {
165
  index: number;
166
  success?: (res: TaroGeneral.CallbackResult) => void;
167
  fail?: (res: TaroGeneral.CallbackResult) => void;
168
  complete?: (res: TaroGeneral.CallbackResult) => void;
169
}): Promise<TaroGeneral.CallbackResult>;
170

171
/**
172
 * Hide the red dot on a tab item
173
 * @param options Hide red dot options
174
 */
175
function hideTabBarRedDot(options: {
176
  index: number;
177
  success?: (res: TaroGeneral.CallbackResult) => void;
178
  fail?: (res: TaroGeneral.CallbackResult) => void;
179
  complete?: (res: TaroGeneral.CallbackResult) => void;
180
}): Promise<TaroGeneral.CallbackResult>;
181

182
/**
183
 * Set tab bar item properties
184
 * @param options Tab item options
185
 */
186
function setTabBarItem(options: {
187
  index: number;
188
  text?: string;
189
  iconPath?: string;
190
  selectedIconPath?: string;
191
  success?: (res: TaroGeneral.CallbackResult) => void;
192
  fail?: (res: TaroGeneral.CallbackResult) => void;
193
  complete?: (res: TaroGeneral.CallbackResult) => void;
194
}): Promise<TaroGeneral.CallbackResult>;
195

196
/**
197
 * Set tab bar style
198
 * @param options Tab bar style options
199
 */
200
function setTabBarStyle(options: {
201
  color?: string;
202
  selectedColor?: string;
203
  backgroundColor?: string;
204
  borderStyle?: 'black' | 'white';
205
  success?: (res: TaroGeneral.CallbackResult) => void;
206
  fail?: (res: TaroGeneral.CallbackResult) => void;
207
  complete?: (res: TaroGeneral.CallbackResult) => void;
208
}): Promise<TaroGeneral.CallbackResult>;
209
```
210

211
### Navigation Bar Management
212

213
Control navigation bar appearance and loading states.
214

215
```typescript { .api }
216
/**
217
 * Set the navigation bar title
218
 * @param options Title options
219
 */
220
function setNavigationBarTitle(options: {
221
  title: string;
222
  success?: (res: TaroGeneral.CallbackResult) => void;
223
  fail?: (res: TaroGeneral.CallbackResult) => void;
224
  complete?: (res: TaroGeneral.CallbackResult) => void;
225
}): Promise<TaroGeneral.CallbackResult>;
226

227
/**
228
 * Set navigation bar color
229
 * @param options Color options
230
 */
231
function setNavigationBarColor(options: {
232
  frontColor: '#ffffff' | '#000000';
233
  backgroundColor: string;
234
  animation?: {
235
    duration?: number;
236
    timingFunc?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
237
  };
238
  success?: (res: TaroGeneral.CallbackResult) => void;
239
  fail?: (res: TaroGeneral.CallbackResult) => void;
240
  complete?: (res: TaroGeneral.CallbackResult) => void;
241
}): Promise<TaroGeneral.CallbackResult>;
242

243
/**
244
 * Show loading indicator in navigation bar
245
 * @param options Loading options
246
 */
247
function showNavigationBarLoading(options?: {
248
  success?: (res: TaroGeneral.CallbackResult) => void;
249
  fail?: (res: TaroGeneral.CallbackResult) => void;
250
  complete?: (res: TaroGeneral.CallbackResult) => void;
251
}): Promise<TaroGeneral.CallbackResult>;
252

253
/**
254
 * Hide loading indicator in navigation bar
255
 * @param options Hide loading options
256
 */
257
function hideNavigationBarLoading(options?: {
258
  success?: (res: TaroGeneral.CallbackResult) => void;
259
  fail?: (res: TaroGeneral.CallbackResult) => void;
260
  complete?: (res: TaroGeneral.CallbackResult) => void;
261
}): Promise<TaroGeneral.CallbackResult>;
262
```
263

264
### Background Style
265

266
Control background color and text style.
267

268
```typescript { .api }
269
/**
270
 * Set background color
271
 * @param options Background color options
272
 */
273
function setBackgroundColor(options: {
274
  backgroundColor: string;
275
  success?: (res: TaroGeneral.CallbackResult) => void;
276
  fail?: (res: TaroGeneral.CallbackResult) => void;
277
  complete?: (res: TaroGeneral.CallbackResult) => void;
278
}): Promise<TaroGeneral.CallbackResult>;
279

280
/**
281
 * Set background text style
282
 * @param options Text style options
283
 */
284
function setBackgroundTextStyle(options: {
285
  textStyle: 'dark' | 'light';
286
  success?: (res: TaroGeneral.CallbackResult) => void;
287
  fail?: (res: TaroGeneral.CallbackResult) => void;
288
  complete?: (res: TaroGeneral.CallbackResult) => void;
289
}): Promise<TaroGeneral.CallbackResult>;
290
```
291

292
### Pull-to-Refresh
293

294
Manage pull-to-refresh functionality for pages.
295

296
```typescript { .api }
297
/**
298
 * Start pull-to-refresh programmatically
299
 * @param options Start refresh options
300
 */
301
function startPullDownRefresh(options?: {
302
  success?: (res: TaroGeneral.CallbackResult) => void;
303
  fail?: (res: TaroGeneral.CallbackResult) => void;
304
  complete?: (res: TaroGeneral.CallbackResult) => void;
305
}): Promise<TaroGeneral.CallbackResult>;
306

307
/**
308
 * Stop pull-to-refresh
309
 * @param options Stop refresh options
310
 */
311
function stopPullDownRefresh(options?: {
312
  success?: (res: TaroGeneral.CallbackResult) => void;
313
  fail?: (res: TaroGeneral.CallbackResult) => void;
314
  complete?: (res: TaroGeneral.CallbackResult) => void;
315
}): Promise<TaroGeneral.CallbackResult>;
316
```
317

318
**Usage Examples:**
319

320
```typescript
321
import { 
322
  setTabBarBadge, 
323
  setNavigationBarTitle, 
324
  startPullDownRefresh 
325
} from "@tarojs/taro-rn";
326

327
// Set badge on first tab
328
await setTabBarBadge({ 
329
  index: 0, 
330
  text: '5' 
331
});
332

333
// Update navigation bar title
334
await setNavigationBarTitle({ 
335
  title: 'My Page' 
336
});
337

338
// Start pull-to-refresh
339
await startPullDownRefresh();
340
```