为什么添加FlashMessage组件时我的React应用为什么不编译？

Question

我正在使用React 16.13.0。当我的用户成功提交表单时，我想显示一条成功的简短消息。我以为FlashMessage是必经之路-https://www.npmjs.com/package/react-native-flash-message。根据文档，我将App.js组件中的最后一句话放在...

import React from 'react';
import logo from './logo.svg';
import './App.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import FormContainer from './containers/FormContainer';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import FlashMessage from "react-native-flash-message";

import Add from "./components/Add";
import Search from "./components/Search";

function App() {
  return (<Router>
    <div className="App">
      <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
          <Link className="navbar-brand" to={"/add"}>Chicommons</Link>
          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <Link className="nav-link" to={"/add"}>Add</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to={"/search"}>Search</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div className="auth-wrapper">
        <div className="auth-inner">
          <Switch>
            <Route exact path='/' component={Add} />
            <Route path="/add" component={Add} />
            <Route path="/search" component={Search} />
          </Switch>
        </div>
      </div>
    </div>
    <FlashMessage position="top" />
    </Router>
  );
}

export default App;

但是当我启动我的应用程序时，出现此错误

./node_modules/react-native-flash-message/src/FlashMessage.js
SyntaxError: /Users/davea/Documents/workspace/chicommons/maps/client/node_modules/react-native-flash-message/src/FlashMessage.js: Unexpected token (148:8)

  146 |     case "success":
  147 |       return (
> 148 |         <Image style={[styles.flashIcon, style]} source={require("./icons/fm_icon_success.png")} {...customProps} />
      |         ^
  149 |       );
  150 |     case "info":
  151 |       return <Image style={[styles.flashIcon, style]} source={require("./icons/fm_icon_info.png")} {...customProps} />;

FlashMessage是否与此版本的React不兼容？我应该使用其他替代方法吗？

Answer 1

您不能在react-dom（网络应用）中使用react-native（移动应用）中的模块。 FlashMessage仅用于本机应用程序