我试图使用NativeBase与ReactNative并将图片作为背景.我已经谷歌搜索了一段时间,这里是我提出的代码: export default class WelcomeScreen extends Component { render(){ return ( Container Header Button transparen
export default class WelcomeScreen extends Component {
render(){
return (
<Container>
<Header>
<Button transparent>
<Icon name='ios-arrow-back' />
</Button>
</Header>
<Content>
<Image source={require('../images/telula_upclose.jpeg')} style={styles.backgroundImage} />
<Text>Do you ever feel like you dont have a partner</Text>
</Content>
</Container>
);
}
}
let styles = StyleSheet.create({
backgroundImage: {
flex: 1,
backgroundColor:'transparent',
justifyContent: 'center',
alignItems: 'center',
}
});
问题是这会使图像拉伸很多,因此在模拟器中无法识别.这是模拟器中与实际图像相比的图片:
这是实际的图像:
我该如何解决?
我有两个解决方案:> NativeBase Content组件是React Native ScrollView的包装.
与ScrollView一起使用时的图像使得必须包括图像的高度和宽度.
>如果要排除提及图像的尺寸,请使用“视图”代替“内容”.
<View>
<Image
source={testImage}
style={{ flex: 1, height: null, width: null, resizeMode: 'cover' }}
/>
<Text>Do you ever feel like you dont have a partner</Text>
</View>
