使用 React Native 模块的 NativeScript

在开发选项的平台通用性方面，NativeScript 凭借其广泛的互操作能力而功能强大。让我们看看如何在 iOS 和 Android 上跨 Angular、React、Solid、Svelte 和 Vue 使用 React Native 模块。

Angular 中使用 React Native

👉 https://stackblitz.com/edit/nativescript-react-native-modules-ng?file=src%2Fapp%2Fitem%2Fitems.component.ts

React 中使用 React Native

👉 没错，它确实可以工作 😄

Solid 中使用 React Native

👉 https://stackblitz.com/edit/nativescript-react-native-modules-solid?file=app%2Fapp.jsx

Svelte 中使用 React Native

👉 https://stackblitz.com/edit/nativescript-react-native-modules-svelte?file=app%2Fcomponents%2FHome.svelte

Vue 中使用 React Native

👉 Vue 2: https://stackblitz.com/edit/nativescript-react-native-modules-vue?file=package.json,app%2Freact-polyfills.js,webpack.config.js,app%2Fcomponents%2FHome.vue&title=NativeScript Starter Vue

👉 Vue 3: https://stackblitz.com/edit/nativescript-react-native-modules-vue3?file=src%2Fcomponents%2FHome.vue

Open Native

Open Native 将跨平台社区聚集在一起，帮助他们通过开发多样性进行协作并互相增强。

例如，我们可以通过利用 Open Native 在 NativeScript 中使用 React Native 模块。

使用 React Native 模块安装

npm install @open-native/core

现在我们可以安装 React Native 模块，例如

npm install @react-native-community/netinfo
npm install react-native-device-info

现在我们需要配置我们的应用以使用它们。

配置

配置 webpack 是我们首先要做的。为了在整个项目中导入 React Native 模块，我们需要 babel，因此我们可以安装

npm install metro-react-native-babel-preset -D

现在我们可以配置我们的 webpack.config.js 以使用它们

const webpack = require('@nativescript/webpack');
const { join } = require('path');

module.exports = (env) => {
  webpack.init(env);

  // Learn how to customize:
  // https://docs.nativescript.cn/webpack
  webpack.chainWebpack((config) => {

    // allow React Native modules to be handled with Open Native
    config.resolve.alias.set('react-native', '@open-native/core');

    // react hooks polyfills
    config.resolve.alias.set(
      'react',
      require.resolve(join(__dirname, './src/react-polyfills'))
    );

    // configure babel for the desired React Native modules
    config.module
      .rule('rnmodules')
      .include
        .add(/node_modules(.*[/\\])+react-native-device-info/)
        .add(/node_modules(.*[/\\])+@react-native-community\/netinfo/)
      .end()
      .use('babel-loader')
      .before('ts-loader')
      .loader('babel-loader')
      .options({
        babelrc: false,
        presets: ['module:metro-react-native-babel-preset'],
      });
  });

  return webpack.resolveConfig();
};

享受 React Native 模块

现在您可以像预期的那样使用 TypeScript（或 JavaScript）使用它们

// React Native is pretty cool
import { getIpAddress, getBatteryLevel } from 'react-native-device-info';

const ipAddress = await getIpAddress();
console.log('IP Address:', ipAddress);
const level = await getBatteryLevel();
const batteryLevel = `${(level * 100).toFixed(0)}%`;
console.log('batteryLevel:', batteryLevel);