Question

我是React Native的新手，对React JS也几乎没有经验。

我有一个应用程序，其屏幕由ScrollView组件构建，其中包含不同高度的视图。如果我在iPhone 7上打开该应用程序，则这些View组件的底边框宽度越大，则View组件越高（其包含的内容越多）。这些视图的CSS非常简单，如下所示：

screenSection: {
    borderBottomWidth: 1,
    borderBottomColor: '#333438',
    marginBottom: 48,
},

我也尝试过在borderBottomWidth之后添加/ PixeslRatio.get（），但没有帮助。

这仅在物理Iphone设备上发生，而不在Mac甚至Android设备上的Iphone Simulator中发生。

任何人都知道这可能是什么原因？预先感谢！

代码示例：

<ScrollView>

    <View style={{borderBottomWidth: 1, borderBottomColor: '#333438', marginBottom: 48,}}>
        <Text style={{fontSize: 20, marginHorizontal: 24}}>Section1 Title</Text>

        <View style={{marginHorizontal: 24}}>
            <View style={{borderBottomWidth: 1, borderBottomColor: colors.darkGray, paddingBottom: 10,}}>
                <Text>SubSection Title</Text>
            </View>
            <View style={{paddingVertical: 32, width: '100%'}}>
                <Text>Some content (does not have to be text)</Text>
            </View>
        </View>
    </View>

    <View style={{borderBottomWidth: 1, borderBottomColor: '#333438', marginBottom: 48,}} >
        <Text style={{fontSize: 20, marginHorizontal: 24}}>Section2 Title</Text>

        <View style={{marginHorizontal: 24}}>
            <View style={{borderBottomWidth: 1, borderBottomColor: colors.darkGray, paddingBottom: 10,}}>
                <Text>SubSection1 Title</Text>
            </View>
            <View style={{paddingVertical: 32, width: '100%'}}>
                <Text>Some content (does not have to be text)</Text>
            </View>
        </View>

        <View style={{marginHorizontal: 24}}>
            <View style={{borderBottomWidth: 1, borderBottomColor: colors.darkGray, paddingBottom: 10,}}>
                <Text>SubSection2 Title</Text>
            </View>
            <View style={{paddingVertical: 32, width: '100%'}}>
                <Text>Some content (does not have to be text)</Text>
            </View>
        </View>
    </View>

第二节的边框底部较粗，因为它有2个子节

在iOS上反应本机边框宽度问题

0 个答案: