reactnative常用组件
下列是使用react native开发app是常用组件:
@backpackapp-io/react-native-toast安装:
yarn add react-native-gesture-handler yarn add @backpackapp-io/react-native-toastnativewind安装:
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-sheetexpo-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 versionyarn add.安装:
npx expo install @react-native-community/datetimepicker # or yarn add @react-native-community/datetimepickerexpo-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-webviewreact-native-markdown-display说明:用于渲染markdown文本
安装:
npx expo install react-native-markdown-displayreact-native-reanimated@kesha-antonov/react-native-background-downloader说明:大文件后台下载
安装:
yarn i @kesha-antonov/react-native-background-downloader