android - React-Native 按钮在 Android 上的格式不正确

Question

我正在使用 react-native-circular-action-menu用于弹出导航按钮。在 iPhone 上它看起来符合预期(注意圆圈按钮):

但在 Android 上它被限制在一个盒子里:

这里是这个组件的相关代码:

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  Dimensions
} from 'react-native';
import colors from '../../../styles/colors';
import formStyles from '../../../styles/formStyles';

import ActionButton from 'react-native-circular-action-menu';
import Icon from '../../../assets/components/svgIcons.js';
import { connect } from 'react-redux';
import * as actions from '../../../actions';
import apiHelper from "../../../utils/api";
import { NavigationActions, StackNavigator } from 'react-navigation';


class ProfileCircleNav extends Component {

    renderImage() {
      return(
        <Image
          source={require("../../../assets/images/LexodyL.png")}
          style={{height: 70, width: 70}}
        />
      )
    }

    renderButton() {
      if(!this.state.blocked) {
        return(
          <View style={{minHeight: 200, width: 350}}>
          <ActionButton
            buttonColor={colors.rgbaGreen}
            outRangeScale={.5}
            btnOutRange={colors.halfGreen}
            bgColor={'transparent'}
            position={"right"}
            radiua={200}
            icon={this.renderImage()}
            onPress={this.props.onPress}
            style={{zIndex: 12}}
          >
            <ActionButton.Item buttonColor={'transparent'}  title="Request Lex" onPress={() => {this.createMeeting()}}>
              <View style={styles.actionButton}>
                <Icon
                    name='Calendar'
                    strokeWidth="3"
                    stroke={'#fff'}
                    fill={'#fff'}
                  />
                <Text style={formStyles.textStandard}>Schedule</Text>
                <Text style={formStyles.textStandard}>Lex</Text>
              </View>
            </ActionButton.Item>
            <ActionButton.Item buttonColor={'transparent'} style={styles.actionButtonIcon} title="Chat" onPress={() => this.startConvo()}>
              <View style={styles.actionButton}>
                <Icon
                    name='Chat'
                    strokeWidth="3"
                    stroke={'#fff'}
                    fill={'#fff'}
                  />
                  <Text style={formStyles.textStandard}>Chat</Text>
              </View>
            </ActionButton.Item>
          </ActionButton>
          </View>
        )
      }
    }

    render() {
        return (
            <View style={{
              bottom: Dimensions.get('window').height*.50,
              backgroundColor: 'transparent',
            }}>
              {this.renderButton()}

            </View>
        );
    }
}

const styles = StyleSheet.create({
  actionButtonIcon: {
      height: 500,
      fontSize: 50,
    },
    actionButton: {
      backgroundColor: colors.green,
      height: 100,
      width: 100,
      borderRadius: 50,
      alignItems: 'center',
      justifyContent: 'center',
    }
});

const mapStateToProps = (state) => {
  return {
    currentUser: state.currentUser
  }
}

export default connect(mapStateToProps, actions)(ProfileCircleNav);

几个小时以来，我一直在努力解决这个问题 - 我在这里错过了什么？为什么在 Android 上是正方形？

Answer 1

所以你遇到的问题是这里的高度没有影响。

  actionButtonIcon: {
      height: 500,
      fontSize: 50,
    },

您需要做的是将 size 属性用于 ActionButton.Item。我认为尺寸大于或等于您尝试应用的 100 的 borderRadius。

        <ActionButton.Item buttonColor={'transparent'} size={100}  title="Request Lex" onPress={() => {this.createMeeting()}}>

这是一个工作示例:https://snack.expo.io/ByG7nsVwQ

可以看到代码中使用的prop right here