如何在 React Native 中将文本放在图像上？

Question

如何在 React Native 中将文本垂直放置在图像上？ 我找到了这个文档。但我不能那样做，我不能添加 text 标记作为 Image 标记的子组件。我试过如下所示。

  <Card>
    <CardSection>
            <View style={styles.container}>
              <Image source={require('../Images/4.jpg')} style={styles.imageStyl}  />
    <Text style={styles.userStyle}>
            {this.props.cat.name}
             </Text>
             </View>
            </CardSection>
            </Card>
const styles= StyleSheet.create({

    container:{
         flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
    },
    imageStyl: {
    flexGrow:1,
    width:"100%",
    height:200,
    alignItems: 'center',
    justifyContent:'center',
  },
    userStyle:{
        fontSize:18,
        color:'black',
        fontWeight:'bold',
        textAlign: 'center'
    },
});

如何将文本放在图像的中心？得到这样的东西

原文由 Linu Sherin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须在“css”中使用 position:'absolute' 然后使用 css 属性（如顶部、底部、右侧、左侧）放置您的文本

---

React Native 绝对定位水平居中

将您想要居中的孩子包裹在一个视图中，并使该视图成为绝对视图。

<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}> <Text>Centered text</Text> </View>

原文由 Clad Clad 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

用这个：

 <ImageBackground source={require('background image path')} style={{width: '100%', height: '100%'}}>
   <View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
     <Text>Centered text</Text>
   </View>
</ImageBackground>

原文由 jaideep rawat 发布，翻译遵循 CC BY-SA 4.0 许可协议