一个在 iOS 和 Android 上都更加丰富且高性能的文本组件。

功能

• 支持 iOS 和 Android（当前在 Android 上回退使用 RN 的 Text）
• 原生 iOS 渲染，支持流畅的文本选择。
• 嵌套片段合并为单个原生文本视图
• 支持渲染 Markdown 和 HTML（即将推出）。
• 仅支持新架构

需求

• React Native v0.78.0 或更高版本（Fabric/Nitro 视图）
• Node 18+（推荐 Node 20+）

安装

yarn add react-native-nitro-text react-native-nitro-modules

iOS

cd ios && pod install && cd ..

使用方法

import { NitroText as Text } from 'react-native-nitro-text'
export function Title() {
  return (
    
      🚀 NitroText Showcase
    
  )
}

选择

iOS 使用原生选择。 在 Android 上，NitroText 当前回退到 React Native 的 Text。

import { NitroText as Text } from 'react-native-nitro-text'
export function SelectionExample() {
  return (
    
      Long-press to select this text. NitroText supports smooth selection,
      even with inline styles and
      longer paragraphs.
    
  )
}

HTML 渲染

当您传入 renderer="html" 时，NitroText 可以解析 HTML 字符串子元素和内联 CSS。

import { NitroText } from 'react-native-nitro-text'
export function HtmlExample() {
  const html = 
    

      
Renderer demo
This text comes from HTML with semantic tags.

      
Inline CSS works too.
    

  
  return {html}
}

自定义选择菜单

NitroText 支持在选中文本时出现的自定义菜单项。传入一个包含菜单项数组的 menus 属性，每个菜单项包含一个 title 和 action 回调。

import { NitroText } from 'react-native-nitro-text'
import { useMemo } from 'react'
export function MenuExample() {
  const menus = useMemo(
    () => [
      { 
        title: 'Copy', 
        action: () => console.log('Copy action') 
      },
      { 
        title: 'Share', 
        action: () => console.log('Share action') 
      },
      { 
        title: 'Translate', 
        action: () => console.log('Translate action') 
      },
    ],
    []
  )
  return (
    
      Select this text to see custom menu options appear in the selection menu.
    
  )
}

平台支持

• iOS
• Android - 目前 NitroText 回退到 RN Text。

为什么选择 NitroText？

自定义原生文本视图，具有最小的 JS 开销和原生 iOS 选择功能。非常适合重度/嵌套样式文本和大型列表。它是 RN Text 组件的替代品。

开发

• bun run build — 类型检查并构建包
• bun run codegen — 重新生成代码生成输出
• 示例应用位于 example/

致谢

基于 create-nitro-module 启动。

贡献

欢迎 PR！重大更改请先提出 issue。

💬 如需快速支持，请加入我们的 Discord 频道

--- Tranlated By Open Ai Tx | Last indexed: 2026-05-13 ---