Question

我正在运行一个基本的反应应用程序。我想添加一个带有动态选项的按钮。我发现了这个：https://www.npmjs.com/package/react-native-circular-action-menu

我已安装了所有依赖项，但我收到此错误：

./node_modules/react-native-circular-action-menu/ActionButton.js
Module parse failed: Unexpected token (104:6)
You may need an appropriate loader to handle this file type.
|   renderButton() {
|     return (
|       <View
|         style={this.getActionButtonStyle()}
|       >

我没有使用该工具的任何内容，我只是尝试加载依赖项。这是我的代码：

import React, { Component } from 'react';
import ActionButton from 'react-native-circular-action-menu';
import './OptionCircle.css';


class OptionCircle extends Component {
constructor() {
    super();
};

    render() {
              return (



      <div class="container blue">
        <div class="circle">

        </div>
      </div>            
    );

}

  }

  export default OptionCircle;

Answer 1

我最终制作了自己的作品。

          <div className="container">

        <button onClick={this.hideOtherButtons} className="large-button button ">Click me to hide</button>           
        {this.state.isHidden && <button onClick={this.returnYesStringToParent} className="button deg0">Yes</button> }          
        {this.state.isHidden && <button onClick={this.returnNoStringToParent} className="button deg45">No</button> }
      </div>

的CSS：

.container {
  width: 100px;
  height: 1px;
  position: relative;
}


.container .button {
  background: blue;
  border-color: #3EB2EF;
  display: block;
  position: absolute;
  left: 50%;
  width: 4em; height: 4em;
  margin: 0em;
  border-radius: 50%;
  color: white;
}

.container .large-button {
  border-radius: 50%; 
  width: 8em; 
  height: 8em;
  transform: translate(-3em, -3em);
  color: white;
}

.container .deg0 { transform: translate(5em); } /* 12em = half the width of the wrapper */
.container .deg45 { transform: rotate(-90deg) translate(7em) rotate(90deg); }
.container .deg135 { transform: rotate(135deg) translate(5em) rotate(-135deg); }

模块解析失败：意外的令牌（104：6）getActionButtonStyle

1 个答案: