如何将文本放在图像上以反应本机？

Question

如何在文本中将文本垂直放置在本机中？我找到了这个文档.但我不能这样做,我不能添加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'
    },
});

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

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>

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>

Answer 3

您可以导入ImageBackground而不是Imagefromreact-native并将文本作为子级传递给ImageBackground. 这很神奇。请看下面的代码：

<View style={styles.imageWrapper}>
     <ImageBackground style={styles.theImage} source={{uri : item.imageUrl}}>
          <Text>Hey</Text>
     </ImageBackground>
</View>

const styles = StyleSheet.create({
    imageWrapper: {
        height: 200,
        width: 200,
        overflow : "hidden"
    },
    theImage: {
        width: "100%",
        height: "100%",
        resizeMode: "cover",
    }
})

正如许多人所说，我们也可以使用定位，但我更喜欢使用ImageBackground.