4

我在 Next.js 中使用 react-native-web，然后我想使用 react-native-element 库，它依赖于 react-native-vector-icons。

阅读文档后，网络上的用法，这个例子是我试过的：

在我的next.config.js： 

const path = require('path');
const withTM = require('next-transpile-modules')
([
    'react-native-elements',
    'react-native-paper',
    'react-native-ratings',
    'react-native-vector-icons',
    'react-native-safe-area-view',
    'react-native-status-bar-height',
    'react-native-normalize',
]);

module.exports = withTM({
    devIndicators: {
        autoPrerender: false,
    },
    webpack: (config, { defaultLoaders }) => {
        config.resolve.alias = {
            ...(config.resolve.alias || {}),
            // Transform all direct `react-native` imports to `react-native-web`
            'react-native$': 'react-native-web',
        };
        config.resolve.extensions.push('.web.ts', '.web.tsx', '.ts', '.tsx', '.web.js', '.web.jsx', '.js', '.jsx');
        config.resolve.modules = [ ...config.resolve.modules, path.resolve(__dirname, 'node_modules') ];
        config.resolve.symlinks = false;
        config.module.rules.push(
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [ 'url-loader?limit=10000', 'img-loader' ]
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                exclude: /node_modules/,
                loader: 'file-loader'
            },
            {
                test: /\.(woff|woff2)$/,
                exclude: /node_modules/,
                loader: 'url-loader?prefix=font/&limit=5000'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                exclude: /node_modules/,
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream',
                include: path.resolve(__dirname, 'node_modules/react-native-vector-icons')
            }
        );

        return config;
    }
});

babel.config.js

module.exports = {
    presets: [ 'next/babel' ],
    plugins: [
        [ 'react-native-web', { commonjs: true } ],
        [
            '@babel/plugin-transform-runtime',
            {
                absoluteRuntime: false,
                corejs: false,
                helpers: true,
                regenerator: true,
                useESModules: true,
                version: '7.0.0-beta.0'
            }
        ],
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-transform-async-to-generator',
        '@babel/plugin-proposal-class-properties'
    ]
};

包.json

{
  "name": "with-react-native-web",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-native-elements": "^1.2.7",
    "react-native-normalize": "^1.0.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.11.6"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
    "@babel/plugin-transform-async-to-generator": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@zeit/next-typescript": "^1.1.1",
    "babel-plugin-react-native-web": "^0.11.7",
    "customize-cra": "^1.0.0",
    "file-loader": "^5.0.2",
    "img-loader": "^3.0.1",
    "next-images": "^1.3.1",
    "next-transpile-modules": "^3.1.0",
    "url-loader": "^3.0.0"
  }
}

如您所见，我已经安装了react-native-element,react-native-web和react-native-vector-icon. package.json然后我还将next.config.js使用next-transpile-modules库中的所有模块转译。

然后在pages/index.js我使用这样的库：

import { Button, Text, Image } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';

<View style={styles.container}>
 <Button
    icon={{
      name: "arrow-right",
      size: 15,
      color: "white"
    }}
    title="Button with icon object"
  />
</View>

但这就是我得到的结果：

在此处输入图像描述

问题：

此刻我仍然缺少什么使图标不显示？以及如何在 Next.js 中做到这一点？由于文档没有提及有关 Next.js 的任何内容。

4

0 回答 0