reactnative常用组件

下列是使用react native开发app是常用组件:

  • @backpackapp-io/react-native-toast

    安装:

    yarn add react-native-gesture-handler
    yarn add @backpackapp-io/react-native-toast
  • nativewind

    安装:

    yarn add nativewind
    yarn add -D tailwindcss@3.3.2
    # 初始化
    npx tailwindcss init
    # 修改babel.config.js
    + plugins: ['nativewind/babel']
  • react-native-actions-sheet

    说明:bottom sheet、支持flashlist,比gorhom/react-native-bottomsheet更具有定制性

    安装:

    yarn add react-native-gesture-handler
    yarn add react-native-actions-sheet
  • @expo/react-native-action-sheet

    说明:按钮action-sheet

    安装:

    yarn add @expo/react-native-action-sheet
  • expo-linking

    说明:deep-linking

    安装:

    npx expo install expo-linking
  • @react-native-community/datetimepicker

    说明:Expo SDK in the managed workflow may not contain the latest version of the module, if using expo go has to install module with npx expo install, but using dev client could install module with latest version yarn add.

    安装:

    npx expo install @react-native-community/datetimepicker
    # or 
    yarn add @react-native-community/datetimepicker
  • expo-document-picker

    说明:获取本地文件

    安装:

    npx expo install expo-document-picker
    # 配置 app.json
    "plugins": [
          [
            "expo-document-picker",
            {
              "iCloudContainerEnvironment": "Production"
            }
          ]
        ]
  • expo-localization

    说明:配合i18n-js实现app多语言

    安装:

    npx expo install expo-localization i18n-js
    
    # 配置 app.json
    # 需要app的本地化语言都添加到配置中
    {
      "expo": {
        "ios": {
          "infoPlist": {
            "CFBundleAllowMixedLocalizations": true
          }
        },
        "locales": {
          "ja": "./languages/japanese.json"
        }
      }
    }
    
    # For RTL Support
    {
      "expo": {
        "extra": {
          "supportsRTL": true
          # "forceRTL": true
        },
        "plugins": ["expo-localization"]
      }
    }
  • @10play/tentap-editor

    说明:针对markdown文本输入,推荐使用这个组件,这是基于tiptap 和 prosemirror

    安装:

    npx expo install @10play/tentap-editor react-native-webview
  • react-native-markdown-display

    说明:用于渲染markdown文本

    安装:

    npx expo install react-native-markdown-display
  • react-native-reanimated

  • @kesha-antonov/react-native-background-downloader

    说明:大文件后台下载

    安装:

    yarn i @kesha-antonov/react-native-background-downloader