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

【问题标题】：How to position underline Text in React Native?如何在 React Native 中放置下划线文本？
【发布时间】：2019-03-04 06:12:07
【问题描述】：

如何添加带有边距或内边距的边框？我想删除详细信息文本左侧的扩展下划线下划线应该只在文本详细信息下方如何正确定位？我尝试了 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'
    }

应用上面的代码给了我这个：

但我想要这样的东西：

【问题讨论】：

尝试将样式赋予 Text 组件或赋予其 flex:1 样式
@YashOjha 我尝试将 flex:1 添加到文本组件，但随后文本变得不可见。查看更新的问题。
文本上的 paddingLeft 导致问题，只需将边距留给父视图
发生这种情况是因为您的“详细信息”选项卡视图已扩展到最左侧。你能分享一下 TouchableOpacity 的外部观点，以便我可以解释它是如何完成的。

标签： css reactjs react-native

【解决方案1】：

而不是在您的文本组件的样式上提供paddingLeft: 25，而是在父View 组件上提供margin Left，如下所示：

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

【讨论】：