FAB无法在React Native中运行

时间:2018-01-18 10:24:36

标签: reactjs react-native floating-action-button

import React, { Component } from 'react';
import { Container, Header, View, Button, Icon, Fab } from 'native-base';
export default class FABExample extends Component {
  constructor() {
    this.state = {
      active: 'true'
    };
  }
  render() {
    return (  
      <Container>
        <Header />
        <View style={{ flex: 1 }}>
          <Fab
            active={this.state.active}
            direction="up"
            containerStyle={{ }}
            style={{ backgroundColor: '#5067FF' }}
            position="bottomRight"
            onPress={() => this.setState({ active: !this.state.active })}>
            <Icon name="share" />
            <Button style={{ backgroundColor: '#34A34F' }}>
              <Icon name="logo-whatsapp" />
            </Button>
            <Button style={{ backgroundColor: '#3B5998' }}>
              <Icon name="logo-facebook" />
            </Button>
            <Button disabled style={{ backgroundColor: '#DD5144' }}>
              <Icon name="mail" />
            </Button>
          </Fab>
        </View>
      </Container>
    );
  }
}

我正在使用上面的代码在我的项目中添加FAB。但是我收到了一个错误:

  

正文:{“type”:“TransformError”,“snippet”:“3 | constructor(){           4 | this.state ......

1 个答案:

答案 0 :(得分:1)

这似乎是NativeBase给出的示例代码中的错误。为了纠正错误,请在构造函数中添加 super(); ,如下所示。

constructor() {
  super();
  this.state = {
    active: 'true'
  };
}

您可以参考此link以获取有关构造函数在访问“”之前需要调用super的详细信息