React Native中如何在圆形边框内放置文本？

错误原因 #

你代码中的单行注释// <Text style={styles.subheader}>...</Text>直接写在JSX元素中，未用{/* ... */}包裹，React Native会将其视为未包裹在<Text>组件里的裸文本，从而抛出TEXT strings must be rendered within a text component错误。同时你原本的标题文本放在圆形边框外部，不符合预期布局。

解决步骤及修改代码 #

1. 修复注释格式 #

JSX中的注释必须用{/* 注释内容 */}包裹，替换原单行注释：

{/* <Text style={styles.subheader}>Click on your star sign to get your daily horoscope</Text> */}

2. 调整文本位置到圆形边框内 #

将标题和副标题的<Text>组件移入圆形边框的<View>内部，利用该View的justifyContent: 'center'和alignItems: 'center'属性实现文本居中。

修改后的完整代码（render部分） #

render(){
  const localImage = require('./assets/WallpaperDog-996754.jpg');
  return(
    <ImageBackground source={localImage } style={styles.container}>
      <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
        <View
          style={{
            borderRadius: Math.round(Dimensions.get('window').width + Dimensions.get('window').height) / 2,
            width: Dimensions.get('window').width * 0.8,
            height: Dimensions.get('window').width * 0.8,
            borderWidth:5,
            borderColor:"transparent",
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'rgba(0, 0, 0, 0.4)' // 可选：添加半透明背景提升文本可读性
          }}
          underlayColor='#ccc'
        >
          {/* 标题和副标题放在圆形内部 */}
          <Text style={styles.title}>Astrology</Text>
          <Text style={styles.subheader}>Click on your star sign to get your daily horoscope</Text>
          
          {/* 边框图片组件保持不变 */}
          <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.7}} />
          <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.6,right: 20}} />
          <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.6,left: 20}} />
          <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.7}} />
          <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.6,right: 20}} />
          <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.6,left: 20}} />
          <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.3,left:-20}} />
          <Image source={require('./assets/icon.png')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.3,right:-20}} />
        </View>
      </View>
    </ImageBackground>
  )
}

额外说明 #

• 移除了原ImageBackground根节点的<Text>，将其移至圆形View内部，实现标题副标题在圆形边框内的预期效果。
• 添加的半透明背景可根据设计需求调整透明度或直接移除。
• 确保所有文本内容都被<Text>组件包裹，避免再次触发同类错误。

内容的提问来源于stack exchange，提问作者Jennifer