react-native – React Native如何做最小/最大宽度

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

导读：我想在我的界面中设置一个组件的样式.该组件必须具有至少200的宽度,但我想让它随着屏幕宽度增长到600.但是,有时人们使用平板电脑或大手机.而且我不希望该组件能够永远与屏幕一起成长.我希望它的最大宽度为600. 而且我知道maxWidth至少就目前来说还不是React

我想在我的界面中设置一个组件的样式.该组件必须具有至少200的宽度,但我想让它随着屏幕宽度增长到600.但是,有时人们使用平板电脑或大手机.而且我不希望该组件能够永远与屏幕一起成长.我希望它的最大宽度为600.

而且我知道maxWidth至少就目前来说还不是React Native中Flexbox实现的一部分……那么,今天有没有合理的方法呢？

React Native中没有“maxWidth”这样的东西.您可能希望在运行时设置组件的样式.尝试使用Dimensions.您可以获得设备的屏幕宽度和屏幕高度,并相应地调整组件的宽度.

您可以定义两个不同的样式对象.

对于宽度小于600的设备上的全宽组件.

componentStyle_1: {
    flex: 1
}

对于宽度大于600的设备上的600宽度

componentStyle_2: {
    width: 600
}

您可以检查设备宽度运行时.

var {height,width} = Dimensions.get(‘window’);

if(width>600){
    //load componentStyle_1
}
else{
    //load componentStyle_2
}

获得准确结果的最佳方法是使用您的代码.祝好运！

参见：https://facebook.github.io/react-native/docs/dimensions.html#content

（编辑：李大同）

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