tessl/npm-tarojs--taro-rn
React Native implementation layer for the Taro cross-platform framework, providing React Native-specific APIs and utilities.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
index.mddocs/
@tarojs/taro-rn
@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.
Package Information
- Package Name: @tarojs/taro-rn
- Package Type: npm
- Language: TypeScript
- Installation:
npm install @tarojs/taro-rn
Core Imports
import Taro from "@tarojs/taro-rn";For named imports:
import {
navigateTo,
showToast,
request,
getSystemInfo,
getStorage,
useDidShow
} from "@tarojs/taro-rn";CommonJS:
const Taro = require("@tarojs/taro-rn");
const { navigateTo, showToast, request } = require("@tarojs/taro-rn");Basic Usage
import Taro from "@tarojs/taro-rn";
// Navigation
await Taro.navigateTo({ url: '/pages/detail/index' });
// Show UI feedback
await Taro.showToast({
title: 'Success!',
icon: 'success'
});
// Make network request
const response = await Taro.request({
url: 'https://api.example.com/data',
method: 'GET'
});
// Get device information
const systemInfo = await Taro.getSystemInfo();
// Storage operations
await Taro.setStorage({ key: 'user', data: { id: 1, name: 'John' } });
const userData = await Taro.getStorage({ key: 'user' });Architecture
@tarojs/taro-rn is built around several key architectural components:
- API Layer: Re-exports core navigation and lifecycle APIs from
@tarojs/runtime-rn - Library Layer: React Native-specific implementations for device, network, storage, and media APIs
- Callback Pattern: Standardized callback-based API with
success,fail, andcompletehandlers - Promise Support: All APIs return Promises for modern async/await usage
- React Hooks: Lifecycle and state management hooks for React components
- Type Safety: Full TypeScript support with comprehensive type definitions
Capabilities
Navigation & Routing
Core navigation functionality for page routing, tab management, and navigation bar control in Taro React Native applications.
function navigateTo(options: { url: string }): Promise<TaroGeneral.CallbackResult>;
function navigateBack(options?: { delta?: number }): Promise<TaroGeneral.CallbackResult>;
function redirectTo(options: { url: string }): Promise<TaroGeneral.CallbackResult>;
function reLaunch(options: { url: string }): Promise<TaroGeneral.CallbackResult>;
function switchTab(options: { url: string }): Promise<TaroGeneral.CallbackResult>;User Interface APIs
Comprehensive UI control APIs for displaying toasts, modals, action sheets, and managing screen properties.
function showToast(options: {
title: string;
icon?: 'success' | 'error' | 'loading' | 'none';
image?: string;
duration?: number;
}): Promise<TaroGeneral.CallbackResult>;
function showModal(options: {
title?: string;
content?: string;
showCancel?: boolean;
cancelText?: string;
confirmText?: string;
}): Promise<{ confirm: boolean; cancel: boolean }>;Storage APIs
Local storage management with both synchronous and asynchronous operations for persistent data storage.
function getStorage(options: { key: string }): Promise<{ data: any }>;
function setStorage(options: { key: string; data: any }): Promise<TaroGeneral.CallbackResult>;
function getStorageSync(key: string): any;
function setStorageSync(key: string, data: any): void;Network APIs
HTTP request functionality and WebSocket connection management for network communication.
function request<T = any>(options: {
url: string;
data?: any;
header?: Record<string, string>;
method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'OPTIONS';
dataType?: 'json' | 'text';
responseType?: 'text' | 'arraybuffer';
}): Taro.RequestTask<T>;Device & System APIs
Device information, system capabilities, and platform-specific functionality access.
function getSystemInfo(): Promise<{
brand: string;
model: string;
system: string;
platform: string;
screenWidth: number;
screenHeight: number;
windowWidth: number;
windowHeight: number;
}>;Media APIs
Image, video, and audio management including camera access, media selection, and file operations.
function chooseImage(options?: {
count?: number;
sizeType?: ('original' | 'compressed')[];
sourceType?: ('album' | 'camera')[];
}): Promise<{ tempFilePaths: string[]; tempFiles: any[] }>;Location & Sensor APIs
Geolocation services and device sensor access including accelerometer, gyroscope, and device motion.
function getLocation(options?: {
type?: 'wgs84' | 'gcj02';
altitude?: boolean;
}): Promise<{
latitude: number;
longitude: number;
speed: number;
accuracy: number;
}>;File System APIs
File management operations for reading, writing, and managing local files.
function getFileSystemManager(): FileSystemManager;
interface FileSystemManager {
readFile(options: { filePath: string; encoding?: string }): Promise<{ data: string | ArrayBuffer }>;
writeFile(options: { filePath: string; data: string | ArrayBuffer; encoding?: string }): Promise<TaroGeneral.CallbackResult>;
}React Hooks
Lifecycle and state management hooks for React components in Taro applications.
function useDidShow(callback: () => void): void;
function useDidHide(callback: () => void): void;
function useLaunch(callback: (options: any) => void): void;
function useRouter(): { params: Record<string, string>; path: string };Types
namespace TaroGeneral {
interface CallbackResult {
errMsg: string;
}
}
interface RequestTask<T> extends Promise<T> {
abort(): void;
}