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

您可以看到代码right here

中使用的道具

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

1 个答案: