react-native – 如何使用flex box创建反应原生的圆形

发布时间：2020-12-15 20:13:09 所属栏目：百科来源：网络整理

导读：这是我的组成部分： const styles = { menuContainer: { flex: 1,flexDirection: 'column' },menuItem: { flex: 1,borderRadius: ?? }} View style={styles.menuContainer} TouchableOpacity {styles.menuItem}/ TouchableOpacity {styles.menuItem}/ /View

这是我的组成部分：

const styles = {
 menuContainer: {
  flex: 1,flexDirection: 'column'  
 },menuItem: {
  flex: 1,borderRadius: ??
 }
}
        <View style={styles.menuContainer}>
            <TouchableOpacity {styles.menuItem}/>                    
            <TouchableOpacity {styles.menuItem}/> 
        </View>

bordeRadius in react native不能像50％这样的百分比工作,而在flex框中我不知道每个flexItem的宽度.你有什么想法没有计算每个flexItem的宽度？

解决方法

坏消息,如果您不提前知道容器的尺寸,那么我认为您唯一的选择就是使用 onLayout计算每个Flex容器的尺寸.

{nativeEvent: { layout: {x,y,width,height}}}

如果你能宣布一个固定的宽度&高度,然后它很容易,但听起来这样对你来说不是新闻.

circle: {
    width: 100,height: 100,borderRadius: 100/2
}

已经提交了有关此功能的feature request.通过在此投票来表达您的支持……

https://react-native.canny.io/feature-requests/p/borderradius-percentages

抱歉!

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!