时间戳

首页 > 解决方案 > 查看底部边框给出不同的颜色

reactjs - 查看底部边框给出不同的颜色

问题描述

你好我是新手反应原生我面临一个问题我需要一个不同的边框为此我创建了一个空视图

<View
                  style={{
                    borderBottomColor: '#787878',
                    borderBottomWidth: 0.2,
                  }}
                />

但它给出了不同的颜色，如下图所示 在此处输入图像描述 ，这是我下面的代码

<View
                style={{
                  height: '75%',
                  borderRadius: 5,
                  justifyContent: 'center',
                }}>
                <List
                  tlr={4}
                  trr={4}
                  height={42}
                  Bg="white"
                  titleOne="WALK to gogo point to take the ride"
                  titleTwo="ello"
                  image={require('../assests/walk.png')}
                  color="#888D9B"
                  mt={0}
                />
                <View
                  style={{
                    borderTopColor: '#787878',
                    borderTopWidth: 0.6,
                  }}
                />

                <List
                  mt={0}
                  height={42}
                  Bg="white"
                  titleOne="Pakistan science club"
                  image={require('../assests/metro.png')}
                  color="#888D9B"
                />
                <View
                  style={{
                    borderBottomColor: '#787878',
                    borderBottomWidth: 0.2,
                  }}
                />
                <View style={{flexDirection: 'row'}}>
                  <View style={{width: '50%'}}>
                    <List
                      height={42}
                      Bg="white"
                      titleOne="CD-70"
                      image={require('../assests/gogobike.png')}
                      color="#888D9B"
                    />
                  </View>
                  <View
                    style={{
                      borderRightColor: '#787878',
                      borderRightWidth: 0.2,
                    }}
                  />
                  <View style={{width: '50%'}}>
                    <List
                      height={42}
                      Bg="white"
                      titleOne="Referral code"
                      image={require('../assests/discount.png')}
                      color="#888D9B"
                    />
                  </View>
                </View>

标签： reactjsreact-native

解决方案

如果您设置borderWidth为任何分数（如 0.2、0.5、1.2），则可能会出现意外行为。

看到这个：https ://github.com/facebook/react-native/issues/12401#issuecomment-286756120

所以要么设置borderWidth为整数或StyleSheet.hairlineWidth

borderBottomWidth = StyleSheet.hairlineWidth

首先导入样式表，如：

import { StyleSheet } from "react-native";

StyleSheet.hairlineWidth 是获得非常细的边框宽度的最佳方式。 https://reactnative.dev/docs/stylesheet#hairlinewidth

推荐阅读