CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tarojs--taro-rn

React Native implementation layer for the Taro cross-platform framework, providing React Native-specific APIs and utilities.

Pending
Overview
Eval results
Files

navigation.mddocs/

Navigation & Routing

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

Capabilities

Page Navigation

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' 
});

Page Management

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>;

Tab Bar Management

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>;

Navigation Bar Management

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>;

Background Style

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>;

Pull-to-Refresh

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

docs

device-system.md

file-system.md

hooks.md

index.md

location-sensors.md

media.md

navigation.md

network.md

storage.md

ui-apis.md

tile.json