如何在React Native中放置下划线文本？

Question

如何添加带有边距或填充的边框？我想删除详细信息文本左侧的扩展下划线Broder。下划线应仅在“详细信息”文本下方。如何正确放置它？我试过marginLeft和paddingLeft无法正常工作。代码：

<TouchableOpacity>
    <View style={styles.underlineTextContainer}>
       <Text style={styles.imgText}>DETAILS</Text>
    </View>
</TouchableOpacity>


underlineTextContainer: {
        borderBottomWidth: 2,
        borderColor: '#ffffff'
}

imgText: {
        fontFamily: Fonts.SourceSansProBold,
        fontSize: 16,
        fontWeight: "bold",
        fontStyle: "normal",
        lineHeight: 16,
        letterSpacing: 0,
        color: "#ffffff", 
        paddingLeft: 25,
        paddingBottom: 5,
        textAlign: 'center'
    }

应用上面的代码可以给我以下信息：

但是我想要这样的东西：

Answer 1

不是在文本组件的样式上给paddingLeft: 25，而是在父View组件上给左边距，如下所示：

    underlineTextContainer: {
        borderBottomWidth: 2,
        borderColor: '#ffffff',
        marginLeft: 25,
}

imgText: {
        fontFamily: Fonts.SourceSansProBold,
        fontSize: 16,
        fontWeight: "bold",
        fontStyle: "normal",
        lineHeight: 16,
        letterSpacing: 0,
        color: "#ffffff", 
        paddingBottom: 5,
        textAlign: 'center'
    }