反応ネイティブで画像の上にテキストを垂直に配置する方法は? このドキュメントを見つけました 。しかし、私はそのようにすることはできません、私は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'
},
});
「css」で使用する必要がありますposition:'absolute'
そして、cssプロパティ(上、下、右、左など)を使用してテキストを配置します
ビューの中央に配置する子をラップして、ビューを絶対にします。
<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}> <Text>Centered text</Text> </View>
これを使って:
<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>
そのための独自のコンポーネントがあります。
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};
そのコンポーネントは、希望する任意の画像でコンテナを埋めます;)
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;
通常のHTMLやCSSに似ているので、画像の上にテキストを配置します。テキストを絶対にすることで、画像の上にテキストを配置する必要があります。
これらのコードをそのまま変更しました:
userStyle:{
position : absolute;
bottom : 0,
top : 50,
left : 0,
right : 0,
alignItems: 'center',
justifyContent:'center',
}
これらのコードがあなたの問題を解決することを願っています。