我试图使用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>