嵌套文本的样式不起作用答案

【问题标题】：Style for nested Text is not working react-native嵌套文本的样式不起作用
【发布时间】：2023-03-09 23:15:01
【问题描述】：

App.js：

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>
          <Text>First</Text>
          <Text style={{ borderBottomWidth: 1 }}>Second</Text>
          <Text>Third</Text>
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#ECF0F1"
  }
});

如您所见，我们嵌套了<Text> 组件。问题是某些样式道具，例如 borderBottomWidth - marginVertical - width 不适用于嵌套组件！

有解决这个问题的想法吗？

提前致谢！

【问题讨论】：

标签： javascript react-native

【解决方案1】：

我不确定为什么 (width, marginVertical) 不起作用，但我知道您应该指定 (borderStyle=solid, borderColor) 以便您可以看到它。我认为这是问题所在，希望对您有所帮助。但我应该说，这可能不是因为我试图问一个问题时遇到了你的问题，对我来说，所有的风格都不起作用，不仅如此，它还引发了一个错误，而且它根本没有运行，这很奇怪行为只会发生在 Text 组件上，无论是否嵌套。

【讨论】：