Реагируйте на проблему ширины собственной границы на iOS - PullRequest
Новая
       13

Реагируйте на проблему ширины собственной границы на iOS

0 голосов
/ 18 июня 2019

Я новичок в React Native, и у меня практически нет опыта работы с React JS.

У меня есть приложение с экранами, построенными из компонента ScrollView, содержащего виды разной высоты. Если я открою приложение на iPhone 7, нижние границы этих компонентов View будут иметь большую ширину, чем выше будет компонент View (тем больше в нем содержимого). Эти представления имеют очень простой CSS, как показано ниже: 

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

Я также пытался добавить / PixeslRatio.get () после borderBottomWidth, но это не помогло.

Это происходит только на физических устройствах Iphone, но не в Iphone Simulator на Mac или даже на устройствах Android.

Кто-нибудь знает, что может быть причиной этого? Заранее спасибо!

Пример кода: 

<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>

Второй раздел будет иметь более толстый borderBottom, потому что он имеет 2 подраздела

...