改变高度后保持图像中心答案

【问题标题】：keeping image center after changing height改变高度后保持图像中心
【发布时间】：2021-03-30 05:56:48
【问题描述】：

我有一个简单的页面，可以打开带有几种样式的图像。但是，当我将高度更改为... height: SCREEN_HEIGHT - 200 时，图像会变小但不会保持居中。此外，它甚至可能会剪切图像。我该如何解决这个问题，以便我可以使图像更小但保持居中？

如果我给它一个高度：100 和一个宽度：100，并以绝对或对齐内容定位它，它在所有设备上看起来都一样吗？

非常感谢你们的任何意见！我比你知道的更感激它。

import React from'react'
import { StyleSheet, Text, View, Dimensions, Image, Animated} from 'react-native'

const SCREEN_HEIGHT = Dimensions.get('window').height
const SCREEN_WIDTH = Dimensions.get('window').width

const Bars = [
  {id : "1", uri: require('./assets/placeholder1.jpg')},
  {id : "2", uri: require('./assets/placeholder2.jpg')},
  {id : "3", uri: require('./assets/placeholder3.jpg')},
  {id : "4", uri: require('./assets/placeholder4.jpg')},
  {id : "5", uri: require('./assets/placeholder5.jpg')},
  {id : "6", uri: require('./assets/placeholder6.jpg')},
  {id : "7", uri: require('./assets/placeholder7.jpg')},
  {id : "8", uri: require('./assets/placeholder8.jpg')},
  {id : "9", uri: require('./assets/placeholder9.jpg')},
]

export default class App extends React.Component {
  render() {
    return(
      <View style={{flex:1}}>
         
         {/* styles header */}
         <View style={{height: 60 }}>

         </View>

         {/* styles bar images */}
         <View style={{flex: 1}}>
            <Animated.View style={styles.barImage}>

                <Image 
                style={{flex: 1 ,
                        height: null,
                        width: null,
                        
                        borderRadius: 20
                      }}
                resizeMode='cover'
                source={Bars[0].uri} />
                
             </Animated.View>
         </View>

          {/* styles footer if I even need it */}
         <View style={{height: 60 }}>

         </View>

      </View>
    )
  }
}


const styles = StyleSheet.create({

  barImage: {
    height: SCREEN_HEIGHT - 170, 
    width:SCREEN_WIDTH, 
    padding: 10,
  
    }
  }
  )

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

您使用 resizeMode 错误。 resizeMode 是 <Image /> 组件的一个属性。你必须用<View /> 包裹<Image /> 并给<View /> 一个width 和height 并将<View /> 居中。

<View style={{alignItems: 'center', justifyContent: 'center'}}>
    <View style={{width: 100, height: 100}}>
        <Image 
            ...
            resizeMode='cover'
            ...
        />
    </View>
</View>

【讨论】：

那我应该怎么做呢？
您是否尝试在<Image /> 组件上将resizeMode 设置为cover 而不是它的样式？
对不起，我误会了，我已经更新了我的代码，仍然没有运气。
我只需要缩小图片，但它在所有设备上看起来都一样。
好的，真棒！谢谢，无论设备尺寸如何，这些尺寸的外观都会保持不变？

【解决方案2】：

在您的样式表中，使用边距元素使图像居中。如果您将它们设置为自动，它将自动居中。您还可以使用 vertical-align 和许多其他中心组件。使用本网站了解更多背景信息并通过多种其他方式更好地理解您的用例：https://www.w3.org/Style/Examples/007/center.en.html

【讨论】：