Comment placer verticalement un texte sur une image dans réagit natif? J'ai trouvé ce doc . Mais je ne peux pas faire comme ça, je ne peux pas ajouter la balise text
en tant que composant enfant de la balise 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'
},
});
Comment placer le texte au centre de l'image? Obtenir quelque chose comme ceci
Vous devez utiliser le "css" position:'absolute'
Et placez ensuite votre texte en utilisant les propriétés css (comme en haut, en bas, à droite, à gauche)
Réagir au centre du positionnement absolu horizontal absolu
Enveloppez l’enfant que vous voulez centré dans une vue et donnez-lui une vue absolue.
<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
<Text>Centered text</Text>
</View>
utilisez ceci:
<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>
J'ai mon propre composant pour le faire:
import React from 'react';
import { View, Image } from 'react-native';
const BackgroundImage = (props) => {
const { container, image } = styles;
return (
<View style={container}>
<Image
style={[image,
{ resizeMode: props.resizeMode,
opacity: props.opacity}
]}
source={props.source}***strong text***
/>
</View>
)
};
const styles = {
container: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
},
image: {
flex: 1,
}
};
export {BackgroundImage};
ce composant remplira votre conteneur avec l’image de votre choix;)
import React from 'react';
import { View, Image } from 'react-native';
class List extends Component {
render() {
let source = {uri: 'http://via.placeholder.com/350x150'};
return (
<View style = {{backgroundColor: 'black'}>
<BackgroundImage
resizeMode="cover"
opacity={0.6}
source={source}
/>
<Text>Hello World</Text>
</View>
)
}
export default List;
Son similaire au HTML et CSS normaux place un texte sur une image. Vous devez placer un texte sur l'image en rendant le texte absolu.
modifié ces codes tels quels:
userStyle:{
position : absolute;
bottom : 0,
top : 50,
left : 0,
right : 0,
alignItems: 'center',
justifyContent:'center',
}
J'espère que ce code corrigera votre problème.