[英]React-Native buttons are not formatting correctly on Android
I'm using react-native-circular-action-menu for popout navigation buttons.我正在使用react-native-circular-action-menu弹出导航按钮。 On iPhone it looks as expected (note the circle buttons):
在 iPhone 上,它看起来像预期的一样(注意圆形按钮):
But on Android it's being constrained into a box:但在 Android 上,它被限制在一个盒子里:
Here is the relevant code for this component:这是该组件的相关代码:
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);
I've been trying to figure this out for hours - what am I missing here?几个小时以来,我一直试图弄清楚这一点 - 我在这里错过了什么? Why is it a square on Android?
为什么它在 Android 上是一个正方形?
so the issue you have is that height here has no effect.所以你的问题是这里的高度没有影响。
actionButtonIcon: {
height: 500,
fontSize: 50,
},
what you have to do is use the prop size
to ActionButton.Item
.您需要做的是将道具
size
用于ActionButton.Item
。 I think a size bigger or equal than the borderRadius of 100
you are trying to apply.我认为尺寸大于或等于您尝试应用的
100
的 borderRadius。
<ActionButton.Item buttonColor={'transparent'} size={100} title="Request Lex" onPress={() => {this.createMeeting()}}>
Here is a working example: https://snack.expo.io/ByG7nsVwQ这是一个工作示例: https : //snack.expo.io/ByG7nsVwQ
You can see the prop used in the code right here你可以在这里看到代码中使用的道具
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.