Question

我最近更新了React-native，它引入了一个警告，其代码如下：

 <Image
      source={require('../../assets/icons/heart.png')}
      style={{
        resizeMode: 'contain',
        height: 25,
        width: 25
      }}
    >
      <Text>foobar</Text>
    </Image>

警告：

index.ios.bundle：50435使用＆lt; Image＆gt;和孩子一起被弃用了在不久的将来将是一个错误。请重新考虑布局或使用＆lt; ImageBackground＆gt;代替。

麻烦的是当我使用ImageBackground组件时，它会给我一个警告，告诉你不能使用ResizeMode样式。

 <ImageBackground
      source={require('../../assets/icons/heart.png')}
      style={{
        resizeMode: 'contain',
        height: 25,
        width: 25
      }}
    >
      <Text>foobar</Text>
    </ImageBackground>

警告：

警告：道具类型失败：无效的props.style键'resizeMode' 提供给'查看'。坏对象：{ResizeMode：'包含，高度：25，宽度：25}

你应该如何使用ImageBackgrounds？似乎没有任何关于它的文档在线。

Answer 1

ImageBackground接受两个样式道具 - style和imageStyle - 它们（显然）分别应用于内部View和Image。还值得注意的是，容器样式的高度和宽度值会自动应用于图像样式。有关详细信息，请访问this。

Answer 2

将style移到内联<ImageBackground source={require('../../assets/icons/heart.png')} resizeMode= 'contain' style={{ height: 25, width: 25 }} > <Text>foobar</Text> </ImageBackground>之外。

示例：的

select r.name,r.identifier,r.version_number 
from `release` r
inner join  ( 
select max(version_number) as maximum_version_number, name 
from `release`
group by name  
) t on  t.maximum_version_number = r.version_number  and t.name = r.name

Answer 3

我确实遇到过这个问题;我最终放弃<ImageBackground>并返回使用<Image>但删除了其中的元素。然后我将整个事件包装在一个新的<View>标记中，并将<Image>绝对放在样式中。如果使用的话，我的代码就在这里：

<强> JSX

render() {
    return (
      <View style={{ alignItems: 'center' }}>
        <Image
          source={require('../images/pages/myImage.jpg')}
          style={styles.backgroundImage}
        />

<强>风格

const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');

const styles = StyleSheet.create({

  backgroundImage: {
   flex: 1,
   position: 'absolute',
   resizeMode: 'cover',
   width: viewportWidth,
   height: viewportHeight,
   backgroundColor: 'transparent',
   justifyContent: 'center',
   alignItems: 'center'
  },

ImageBackground ResizeMode

3 个答案: