ImageBackground resizeMode在风格道具中不起作用
ImageBackground resizeMode是React Native中的一个属性，用于设置背景图片的缩放模式。它用于指定当背景图片的尺寸与容器尺寸不匹配时，如何调整图片的大小以适应容器。
在风格道具中不起作用可能是由于以下几个原因：
- 风格道具中没有设置背景图片：首先要确保在风格道具中设置了背景图片，否则resizeMode属性是没有作用的。
- 容器尺寸与背景图片尺寸匹配：如果容器尺寸与背景图片尺寸完全匹配，那么resizeMode属性也不会起作用。因为它主要用于处理尺寸不匹配的情况。
- resizeMode属性值设置错误：resizeMode属性有多个可选值，包括cover、contain、stretch、repeat、center等。如果设置的值不正确，也会导致该属性不起作用。需要确保设置了正确的resizeMode属性值。
总结起来，如果在风格道具中设置了背景图片，并且容器尺寸与背景图片尺寸不匹配，同时正确设置了resizeMode属性值，那么resizeMode属性应该能够起作用。如果仍然不起作用，可能需要检查其他相关代码或组件是否影响了背景图片的显示。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：提供高可靠、低成本的云端存储服务，适用于存储和处理任意类型的文件。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，可满足不同规模和需求的应用场景。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等，帮助开发者构建智能化应用。详情请参考：https://cloud.tencent.com/product/ai
相关·内容
我最近更新了React本机，它引入了一个警告，并使用了以下代码：
<Image
source={require('../../assets/icons/heart.png')}
style={{
resizeMode: 'contain',
height: 25,
width: 25
}}
>
<Text>foobar</Text>
</Image>
并警告：
不推荐使用与子级一起使用的index.i
浏览 9提问于2017-07-26得票数 14
回答已采纳
我正在尝试有一个带有背景图像的屏幕，但如果图像尺寸不能让它全屏显示，我希望图像被固定在顶部。RN文档似乎说“包含”应该可以做到这一点，但由于某些原因，它仍然像resizeMode=“resizeMode=”一样将图像居中。有没有办法做到这一点？以下代码不起作用。
<ImageBackground source={defaultImage} style={{ flex: 1 }} resizeMode="contain">
</ImageBackground>
浏览 0提问于2019-08-28得票数 0
2回答
我使用的是从react-native导入的ImageBackground组件，但没有显示任何图像。它只是背景中的一个白色屏幕 constructor(props){
super(props)
this.backgroundImage = {image: {uri: "https://i.myImage.com"}}
}
......
<ImageBackground style={styles.container} resizeMode="stretch" source={this.backgroundImage} onError={
浏览 20提问于2020-08-29得票数 1
回答已采纳
目前，我正在使用以下代码在上显示一个背景图像：
<ImageBackground
source={myImage}
style={{ width:'100%', height:'100%' }}
imageStyle={{resizeMode: 'contain'}}
>
....
</ImageBackground>
我不想我的形象延伸和resizeMode: 'contain'完美地完成这项工作。通过这种方式，图像不会覆盖我所有的屏幕，而只覆盖其中的一部分，这正是我想要实现的。
浏览 0提问于2019-03-08得票数 2
回答已采纳
当我使用<ImageBackground>和<Image>组件时，我很难理解为什么类型记录会给我这条错误消息。
错误信息：
没有过载和这个电话匹配。重载2中的1，‘(道具: ImageBackgroundProps \ Readonly)：ImageBackground'，给出了以下错误。键入'{子类:元素；样式：{ flex: number；justifyContent：“Element”；}；resizeMode：“掩护”；源: any；}不能指定键入'IntrinsicAttributes & IntrinsicClassAttr
浏览 14提问于2022-04-27得票数 5
回答已采纳
我正在用react native开发一个简单的应用程序。我刚开始使用原生的react。我使用的是最新版本0.64。问题是ImageBackground的resizeMode在样式表中使用时不起作用。但是，当我使用它作为ImageBackground组件的直接支柱时，它就开始工作了。 以下是我的代码： /*global require */
...
import {
StyleSheet,
ImageBackground,
View,
TouchableOpacity,
Text,
useWindowDimensions,
} from "react-n
浏览 15提问于2021-04-22得票数 0
回答已采纳
我是新来的反应本地人，不完全熟悉国家管理。目前，我使用的反应-本机-刷卡库，以保存我的可滑动图像。每次滑动我都会看到下一张照片。代码如下
Fish.js：
<Swiper style={styles.wrapper} height={10} horizontal={true} >
<View style={styles.slide1}>
<Image
resizeMode="stretch"
style={styles.image}
source={requir
浏览 8提问于2021-08-07得票数 0
回答已采纳
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Image, TextInput, TouchableOpacity, background, ImageBackground,} from 'react-native';
import { navigate, navigation, } from 'react-navigation';
const lockIcon = require("./assets/im
浏览 1提问于2019-12-06得票数 0
回答已采纳
3回答
我使用的反应-本机模式，其中包含一个视图。视图有一些TextInput元素。当键盘弹出时，View元素全部折叠，以适应剩余的空间，但我不希望视图发生任何更改。
这确实是，而不是发生在IOS上。而且，在相同的应用程序中，安卓的非模态视图中也会出现而不是。
我在我的android中设置了windowSoftInputMode="adjustPan“，但它似乎不适用于Modal。
return(
<ImageBackground source={require('./../images/IMG1.png')}
style={{flex: 1}} ima
浏览 0提问于2018-03-05得票数 8
回答已采纳
我有下面的图片，我想作为标题在我的Reactive原住民应用程序中坐下来：
我希望我的<ScrollView>中的所有文本都在标题后面流动。我能够用以下代码来完成这一任务：
import React, { Component } from 'react';
import { Text, View, ScrollView, ImageBackground} from 'react-native';
export default class Login extends Component {
render() {
return (
浏览 3提问于2020-03-31得票数 0
回答已采纳
我在resizeMode={'repeat'}中使用ImageBackground。但它并不能涵盖所有的背景。当我将resizeMode更改为contain时，它适合背景
render(
return (
<ImageBackground source={require('./img/download.jpg')} style=
{styles.container} resizeMode={'repeat'}>
浏览 0提问于2019-07-12得票数 0
我尝试为我的图片imageBackground调用我的扁平列表的一个元素，但是我得到了这个错误消息： ‘无效调用’ 如果我喜欢这样工作 <FlatList
horizontal={true}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
data={this.state.new
浏览 17提问于2021-05-09得票数 0
回答已采纳
我想在取回完成后在视图组件中显示卷帘，这是我的代码。 renderItem = ({ item }) => {
return (
<Swiper showsButtons={false} showsPagination={false} autoplay={true}>
<TouchableOpacity onPress={this.GetItem.bind(this, item.info.title)}>
<ImageBackground
浏览 8提问于2019-09-30得票数 0
我在努力保持图像的纵横比。当我有特定的宽度和resizeMode时，它可以在安卓系统上工作，但不能在IOS上工作。有什么想法吗？
图像：{宽度: 150，resizeMode：“中心”}
浏览 0提问于2018-05-08得票数 0
回答已采纳
我在我的应用程序中有一个组件，如果它被赋值为直接字符串值(“someImage.png”)，它可以很好地工作，但是如果我试图通过将图像名存储在局部变量中来分配它，它就会给出这个异常"require()必须有一个字符串文字参数“。
<ImageBackground source={require("./Resources/bg/imageone.png")} resizeMode='cover' style={customStyles.backdrop}>
问题发生在这种情况下。
let imageName = "./Resources
浏览 8提问于2017-12-19得票数 18
回答已采纳
我刚接触React-native，我有一个非常简单(至少我这么认为)的问题。
我有一个带有resizeMode='contain'的ImageBackground，现在我想把背景定位到容器的顶部……
<ImageBackground style={styles.imageBackground} source={backgroundImage} resizeMode='contain'>
... some content
</ImageBackground>
图像以正确的方式呈现，但问题是它是垂直居中的，而不是我想让它顶部对齐……
浏览 2提问于2018-12-11得票数 3
我正在构建一个应用程序使用的反应本机，我想实现一个背景图像与重复调整大小模式。
<View
style = {style.container}>
<ImageBackground
source={require('../../assets/images/background.png')}
resizeMode="repeat"
style={style.imageBackgrou
浏览 0提问于2019-02-21得票数 5
({ title, subTitle, image })都是默认的any类型，我应该能够将它们设置为string，除非有更具体的类型将图像的类型设置为URL？我只是使用默认选项卡模板从博览。它确实使用了TypeScript.，我可能更愿意将设置为内联，但也不反对尝试接口。我以为只是冒号字符串
: string
但我肯定在语法中遗漏了一些东西，因为到目前为止，它还不喜欢它。
import React, { FC } from 'react'
import { ImageBackground, StyleSheet, Text, View } from 'react-nat
浏览 1提问于2021-05-15得票数 0
回答已采纳
我有多个背景相同的屏幕。我想把ImageBackground放在导航文件中。但不知何故，屏幕是看不见的。 以下是代码 <ImageBackground style={styles.imageContainer} source={pic1}>
<Stack.Navigator>
<Stack.Screen name="screen1" component="Screen1" />
<Stack.Navigator>
</ImageBackground>
imageCo
浏览 17提问于2020-10-28得票数 1
回答已采纳
我正在使用react native的ImageBackground组件，但在IOS (设备)中它不显示图像，在模拟器中出现图像这能是什么？
代码如下：
import { ImageBackground } from 'react-native';
const imgSrc = require('../../assets/images/bg-login.png');
<ImageBackground
resizeMode="cover"
source={imgSrc}
style={styl
浏览 28提问于2021-03-02得票数 0
我开始学习react-native，但我遇到了一个问题。我需要一张在背景中重复的图像，但它已经变形了。resizeMode似乎不工作了。
import React, { Component } from 'react';
import { Image, ImageBackground, StyleSheet, Button, View, Text } from 'react-native';
const styles = StyleSheet.create({
home: {
flex: 1,
flexDirection: 'col
浏览 12提问于2019-11-07得票数 0
回答已采纳
2回答
我正在使用gif制作一个动画登录屏幕，但它只在世博会上动态显示，当我构建apk时，gif保持静态。
<ImageBackground source={require("./src/assets/DrawerIcons/back_login.gif")} style={styles.background} resizeMode="cover">
<View style={styles.markWrap}>
<Image source={mark} style={styles.mark} re
浏览 0提问于2018-10-25得票数 0
3回答
如何使本机组件背景透明？
、、、、
我使用的标签导航，其中包含两个屏幕，我需要使每个屏幕的背景透明，以便应用背景是可见的。
这就是现在的样子，我希望你在Tabs导航器上看到的背景在整个屏幕上都是可见的。
这是Tabs组件：
const Tabs = props => {
return(
<Background source={require('../../assets/bg_image.png')}>
<Tab.Navigator screenOptions={({ route }) => ({
tabBarIcon: ({
浏览 5提问于2022-04-24得票数 1
回答已采纳
1回答
反应本机图像
、、、
我想要一个背景图像，在包含模式下，但是当我这样做的时候，图像的高度和宽度会得到一半，但是当我使用resizemode=“盖子”时，图像就会从像1： 2：这样的侧面剪裁，我只希望像这样的图像保持在完全高度和宽度的包含模式中。
<ImageBackground resizeMode="contain" source={{ uri: "https://www.anime-internet.com/content/images/2022/06/2022-06-07-23_09_28-AnimePahe_Tomodachi_Game_-_10_1080p_S
浏览 4提问于2022-09-11得票数 1
我使用react-native-super-grid来显示网格图像。在网格中加载图像之前，我需要设置每个图像的背景颜色。
下面是我的代码：
<GridView
spacing={5}
itemDimension={gridWidth}
items={this.renderItems()}
style={{backgroundColor: 'white'}}
renderItem={this.renderGrid.bind(this)}
/>
// Render grid method
renderGrid() {
retu
浏览 6提问于2019-04-01得票数 0
react-native如何在ImageBackground上居中显示图像
我有这样的简单代码
<View style={styles.container}>
<ImageBackground source={require('../../../public/images/sss.png')} style={styles.image}>
<Image
style={styles.logoStyle}
source={require('./../../../public/images/logo1.png
浏览 0提问于2021-03-15得票数 0
我在我的LeftDrawer头中使用了一个ImageBackground。我已经将高度和宽度设置为100%，并且没有设置任何填充或边距。但是，我不明白为什么我的抽屉标题图像在左右两侧占据了一些空间。您可以在下图中看到这一点- ? 这里我提供了这个类的代码- import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import
浏览 24提问于2019-03-30得票数 1
我正在用原生的react创建一个简单的笔记应用。我想要TextInput全高，可以滚动，有纸张背景(我认为必须像css一样重复背景，但resizeMode：' repeat‘不起作用)。底部还有一个按钮。请帮帮忙。 下图是我当前的布局： ? 这是我想要的布局： ? 这是我的代码： <View>
<ScrollView
style={{flex: 1}}
>
<ImageBackground
style={{
backgroundColor: 'red',
浏览 19提问于2019-04-04得票数 0
回答已采纳
我想在ImageBackground组件中呈现一个文本组件。
我尝试的是
<ImageBackground
source={{uri: smartPaperData.backgroundImage}}
resizeMode="contain"
resizeMethod="scale"
style={{
height: '100%',
width: undefined,
backgroundColor: 'yellow',
}}>
浏览 0提问于2020-08-05得票数 0
2回答
我接手了一个未完成的反应本土项目，这个表示法让我感到困惑。匿名函数是用大括号写的，并给出了各种参数( handleChange、handleBlur、handleSubmit、values)。我们在哪里定义这些论点？匿名函数可以从哪里获得这些参数的数据？这些论点究竟有什么作用呢？
这个代码块位于JSX模板中，不同的react本机元素之间。整个项目都是沿着TypeScript建立的。
return (
<ScrollView
contentContainerStyle={{
flex: 1,
flexGrow: 1,
padding: spacing.xl,
浏览 1提问于2022-07-16得票数 1
回答已采纳
我在整个屏幕上有一个ImageBackground，我正试图将图像，这是更大的，向左移动。当我试图使用left: -100定位图像时，就会发生这种情况(下图)。ImageBackground被移动，但作为一个整体移动。我需要的只是移动底层的图片，而不是集成在View中的ImageBackground。如何才能做到这一点？
造型
bgImageContainer: {
flex: 1
},
bgImage: {
left: -100
}
码
const screenSize = {
width: Dimensions.get('window').w
浏览 1提问于2022-01-13得票数 0
我想要将一个图像放在另一个图像的顶部，但它不应该受到父图像“包含”参数的影响。如果我删除resizeMode="contain“，它可以正常工作，但除此之外，它看起来如下所示： ? 我想要的是，将小图像放在父图像中。实际上，我想把小图像放到准确的角落。由于resizeMode="contain“，所以不在空白处。我的代码如下所示： <PagerView style={styles.pager} initialPage={0} showPageIndicator>
<View style={styles.picView} key={i}>
浏览 13提问于2021-06-26得票数 0
我试图渲染一个图像作为背景，但没有工作，我不知道为什么。这是我的密码。
<ImageBackground
source={require('../assets/images/logos/AFC.svg')}
resizeMode="cover"
style={styles.style}>
</ImageBackground>
浏览 7提问于2022-10-25得票数 0
回答已采纳
1回答
反应本机图像包含空空间
、、、
在react本机中，我呈现的图像如下所示：
<Image
source={{
uri: downloadDest,
scale: 1
}}
style={styles.image}
resizeMode='contain'
>
</Image>
image: {
flex: 1,
backgroundColor: 'blue',
},
此代码呈现如下图像，在这种情况下，我需要在图像和父视图之间调用空填充。
我如何计算W，H，图像高度和图像宽度？
浏览 2提问于2017-10-07得票数 0
我的React Native应用程序中有以下屏幕： ? 蓝色的黑白背景是ImageBackground，中间的绿色条带是View。代码是： <ImageBackground
source={require('@images/login-background.jpg')}
style={{
flex: 1,
width: '100%',
resizeMode: 'cover',
justifyContent: 'center',
}}
>
<View style
浏览 94提问于2020-04-24得票数 1
回答已采纳
我收到错误“未定义不是一个对象”(在试图设置背景图像时，计算'asset.scales‘时，任何人都知道为什么，即使一切看起来都很好。
import { ImageBackground, StyleSheet } from 'react-native-web'
function WelcomePage() {
return (<ImageBackground source={require('../assets/background.jpg')} style={{width: '100%', height: '100
浏览 5提问于2022-02-18得票数 1
我收到了以下本机反应警告：
道具resizeMode = contain不应直接设置在图像上。
下面是引起警告的代码：
<Image style={imageStyle} resizeMode={'contain'} source={require('image!elephant')} />
这段代码可以工作，但我不清楚如何正确地设置图像以包含、覆盖或拉伸。我做错了什么？
浏览 1提问于2015-07-01得票数 1
回答已采纳
我正在使用react native和react导航v3，并且我试图为我的整个应用程序设置一个背景图片。但由于某些原因，图像无法显示。
我在网上搜索过解决方案，但似乎不起作用。
const AppNavigator = createAppContainer(
createStackNavigator(
{
Home: {screen: Home},
Vocabulary: {screen: Vocabulary},
AddWord: {screen: AddWord},
},
{
initialRouteName: &#
浏览 1提问于2019-02-09得票数 2
我用的是本能反应。我想用react-native-swiper的斯威珀。
从“react本机- Swiper”导入swiper；
如您所见，按钮的颜色被设置为blue作为默认的以及size。
我使用这个Swiper如下所示。
<Swiper
style={{
width,
height: 400,
}}
buttonWrapperStyle={{
paddingHorizontal: 20,
}}
horizontal
showsButtons={true}
showsPagination={true}
}
>
浏览 4提问于2022-02-25得票数 1
回答已采纳
我给出了一个ImageBackground组件，我希望它占据整个屏幕，但它似乎有很小的填充，即使我将图像调整两倍或更多。它是从哪里来的？
Here is the code of the component
import React from "react";
import { View, Text, Button, ImageBackground, StyleSheet } from "react-
native";
export class HomeScreen extends React.Component {
static navigat
浏览 0提问于2019-04-05得票数 1
我有一个应该显示搜索结果的屏幕。因此，我在render()中创建了我的fetch。正如在this stackoverflow response中所描述的，我在数组中推送了响应。在控制台面板中，结果数组在几秒钟后加载，但在我的屏幕中，结果数组仍然是空的。 这是我的渲染函数 render() {
let result = [];
let endPoint = this.props.navigation.getParam('endPoint', '');
fetch(endPoint, {
me
浏览 18提问于2019-03-29得票数 0
我想在react-native中使用ImageBackground在特定位置显示文本。 当使用resize模式作为容器时，如何为不同的屏幕尺寸指定不同的绝对位置？ https://i.stack.imgur.com/HRUwn.png <ImageBackground
source={require("../../assets/image.png")}
style={{ width: "100%", height: "100%", position: "relative" }}
res
浏览 27提问于2020-12-25得票数 1
回答已采纳
2回答
我希望我的屏幕看起来像 ? 但我得到了 ? 经过各种尝试之后。 以下是我的代码： <ImageBackground
style={styles.imageBackground}
source={constants.image.bg_splash}
> 风格：- imageBackground: {
// flex: 1,
justifyContent: 'center',
alignItems: 'center',
// width:'90%',
// //height:c
浏览 21提问于2020-06-23得票数 0
回答已采纳
我正在尝试创建一个“平铺”的背景，用一个ImageBackground元素覆盖整个设备的屏幕。我的问题是，即使ImageElement覆盖了整个屏幕，从附加的图像上的红色边框可以看出，内部图像只覆盖了整个宽度，并在垂直方向上留下了空白。我已经检查了文档，但找不到任何相关的东西。这是我的组件
<ImageBackground source={require('../../images/linepattern.jpg')} style={[styles.container]}
resizeMode='repeat'
imageStyle=
浏览 0提问于2019-04-11得票数 0
1回答
我正在为我的应用程序添加图像背景，但是图像的水平部分经过屏幕(左和右部分被剪切)。我尝试使用resizeMode封面和包含，但两者都没有做任何事情。是否有其他方法使图像停留在屏幕内？(我在图像上使用resizeMode，它通常包含图像{相同的图片})。
import React from 'react';
import {
Image,
ImageBackground,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import {DCTBACKGROUN
浏览 9提问于2021-12-07得票数 1
回答已采纳
2回答
我有这些印有图像的卡片。现在，我希望圆角是圆的，但是我目前没有找到圆角的方法不起作用
<TouchableOpacity onPress={() => navigation.navigate('OffersScreen', {offers: offersArray } ) }>
<Card style={{height: 190, width: 190, margin: 0, padding: 0, justifyContent:'center', alignItems: 'center' }}>
浏览 30提问于2020-05-08得票数 0
回答已采纳
我有这个<ScrollView />
<ScrollView
style={styles.scrollview}>
{route.params && route.params....map((cat, index) => {
return <Kitten
cat={cat}
key={index} />
})}
</ScrollView >
const styles = Style
浏览 5提问于2022-08-20得票数 0
回答已采纳
下面是我的代码：
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
View ,
ImageBackground } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={{ flex: 1, flexDirection: 'column
浏览 0提问于2018-09-08得票数 0
我需要有一个水平重复的背景图像来填充父元素，并占据100%的高度(无重复)。 我已经尝试将图像设置为“重复”，高度为100%，但没有成功。有什么建议如何在react-native中做到这一点吗？ <ImageBackground
source={staticImages.background.image}
imageStyle={{ resizeMode: 'repeat', height: '100%' }}
style={{ flex: 1, width: undefined, height: undefined }}
浏览 11提问于2019-09-16得票数 0
1回答
我有“三级圆形”的图像背景(见图)。
我想把文字“你好”放在圆心。看起来它几乎不适用于所有的设备。
我该怎么做呢？
Mu当前代码是：
return (
<ImageBackground source={background} resizeMode="cover" style={{ width: '100%', height: '100%' }}>
</ImageBackground>
我试着使用absolute position，但它在第二个设备上是bronek。有什么诡计吗？
原始图像大小(在资产文件夹中)是10
浏览 3提问于2022-09-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
