Question

我将文本的三个部分包裹在一个较大的文本组件中，它们一起构成一个段落。如何在子文本组件之一上加边框？

我希望文本的三个部分组成一个段落，而中间没有换行，这就是为什么我在这里使用嵌套文本。

我试图只添加borderWidth和borderColor等。它们自己工作，但不能在嵌套的文本组件中使用。

<Text style={styles.text}>
    <Text> first part of the text </Text>
    {/* this doesn't show border  */}
    <Text style={{
      borderWidth: 1,
      borderColor: 'black',
      borderRadius: 12, padding: 8, color: '#577FFF',
      }}>
       middle part of the text 
     </Text>
     <Text> last part of the text </Text>
 </Text>

{/* this works fine  */}
<Text style={{ borderWidth: 1, borderColor: '#000', borderRadius: 12, padding: 8 }}>Test text</Text>

我希望文本的中间部分包裹在边框内。它不必是嵌套的文本结构。如果还有其他可以达到此结果的方法就可以了！谢谢！

编辑：所需效果如下：snack.expo.io/Hy3ic16bB，但这仅适用于Web，不适用于ios

Answer 1

将包装器更改为视图。文字组件只能包含文字。

https://snack.expo.io/B1vAnjjZH

export default class App extends React.Component {
    render() {
        return (
            <View>
                <Text> first part of the text </Text>
                {/* this doesn't show border  */}
                <Text style={{
                    borderWidth: 1,
                    borderColor: 'black',
                    borderRadius: 12, padding: 8, color: '#577FFF',
                }}>
                    middle part of the text
                </Text>
                <Text> last part of the text </Text>
            </View>
        );
    }
}

如何在嵌套文本组件中添加边框？

1 个答案: