React Native implementation layer for the Taro cross-platform framework, providing React Native-specific APIs and utilities.
—
Navigation and routing functionality for page navigation, tab management, and navigation bar control in Taro React Native applications.
Navigate between pages in the application with various transition types.
/**
* Navigate to a new page while keeping current page in the page stack
* @param options Navigation options
*/
function navigateTo(options: {
url: string;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Navigate back to previous page(s) in the page stack
* @param options Back navigation options
*/
function navigateBack(options?: {
delta?: number;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Redirect to a page, replacing the current page
* @param options Redirect options
*/
function redirectTo(options: {
url: string;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Relaunch the app with a new page stack, clearing all previous pages
* @param options Relaunch options
*/
function reLaunch(options: {
url: string;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Switch to a tab page (for tab bar applications)
* @param options Tab switch options
*/
function switchTab(options: {
url: string;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;Usage Examples:
import { navigateTo, navigateBack, redirectTo } from "@tarojs/taro-rn";
// Navigate to a new page
await navigateTo({
url: '/pages/detail/index?id=123'
});
// Navigate back 2 pages
await navigateBack({ delta: 2 });
// Redirect to login page
await redirectTo({
url: '/pages/login/index'
});Manage the current page stack and scroll position.
/**
* Get the current page stack
* @returns Array of current pages
*/
function getCurrentPages(): any[];
/**
* Scroll the page to a specific position
* @param options Scroll options
*/
function pageScrollTo(options: {
scrollTop: number;
duration?: number;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;Control tab bar visibility and styling for tab-based applications.
/**
* Show the tab bar
* @param options Show tab bar options
*/
function showTabBar(options?: {
animation?: boolean;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Hide the tab bar
* @param options Hide tab bar options
*/
function hideTabBar(options?: {
animation?: boolean;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Set a badge text on a tab item
* @param options Badge options
*/
function setTabBarBadge(options: {
index: number;
text: string;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Remove the badge from a tab item
* @param options Remove badge options
*/
function removeTabBarBadge(options: {
index: number;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Show a red dot on a tab item
* @param options Red dot options
*/
function showTabBarRedDot(options: {
index: number;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Hide the red dot on a tab item
* @param options Hide red dot options
*/
function hideTabBarRedDot(options: {
index: number;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Set tab bar item properties
* @param options Tab item options
*/
function setTabBarItem(options: {
index: number;
text?: string;
iconPath?: string;
selectedIconPath?: string;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Set tab bar style
* @param options Tab bar style options
*/
function setTabBarStyle(options: {
color?: string;
selectedColor?: string;
backgroundColor?: string;
borderStyle?: 'black' | 'white';
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;Control navigation bar appearance and loading states.
/**
* Set the navigation bar title
* @param options Title options
*/
function setNavigationBarTitle(options: {
title: string;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Set navigation bar color
* @param options Color options
*/
function setNavigationBarColor(options: {
frontColor: '#ffffff' | '#000000';
backgroundColor: string;
animation?: {
duration?: number;
timingFunc?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
};
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Show loading indicator in navigation bar
* @param options Loading options
*/
function showNavigationBarLoading(options?: {
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Hide loading indicator in navigation bar
* @param options Hide loading options
*/
function hideNavigationBarLoading(options?: {
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;Control background color and text style.
/**
* Set background color
* @param options Background color options
*/
function setBackgroundColor(options: {
backgroundColor: string;
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Set background text style
* @param options Text style options
*/
function setBackgroundTextStyle(options: {
textStyle: 'dark' | 'light';
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;Manage pull-to-refresh functionality for pages.
/**
* Start pull-to-refresh programmatically
* @param options Start refresh options
*/
function startPullDownRefresh(options?: {
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;
/**
* Stop pull-to-refresh
* @param options Stop refresh options
*/
function stopPullDownRefresh(options?: {
success?: (res: TaroGeneral.CallbackResult) => void;
fail?: (res: TaroGeneral.CallbackResult) => void;
complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;Usage Examples:
import {
setTabBarBadge,
setNavigationBarTitle,
startPullDownRefresh
} from "@tarojs/taro-rn";
// Set badge on first tab
await setTabBarBadge({
index: 0,
text: '5'
});
// Update navigation bar title
await setNavigationBarTitle({
title: 'My Page'
});
// Start pull-to-refresh
await startPullDownRefresh();Install with Tessl CLI
npx tessl i tessl/npm-tarojs--taro-rn