Javascript 更改高度后保持图像中心

我有一个简单的页面，可以打开带有几种样式的图像。然而，当我改变高度说。。。高度：屏幕高度-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,
  
    }
  }
  )

从“React”导入React
从“react native”导入{样式表、文本、视图、尺寸、图像、动画}
const SCREEN_HEIGHT=尺寸。获取（“窗口”）。高度
const SCREEN_WIDTH=尺寸。获取（'window'）。宽度
常数条=[
{id:“1”，uri:require（'./assets/placeholder 1.jpg'），
{id:“2”，uri:require（'./assets/placeholder 2.jpg'），
{id:“3”，uri:require（'./assets/placeholder 3.jpg'），
{id:“4”，uri:require（'./assets/placeholder 4.jpg'），
{id:“5”，uri:require（'./assets/placeholder 5.jpg'），
{id:“6”，uri:require（'./assets/placeholder 6.jpg'），
{id:“7”，uri:require（'./assets/placeholder 7.jpg'），
{id:“8”，uri:require（'./assets/placeholder 8.jpg'），
{id:“9”，uri:require（'./assets/placeholder 9.jpg'），
]
导出默认类App扩展React.Component{
render（）{
返回(
{/*样式头*/}
{/*样式栏图像*/}
{/*样式页脚，如果我需要它*/}
)
}
}
const styles=StyleSheet.create({
barImage：{
高度：屏幕高度-170，
宽度：屏幕宽度，
填充：10，
}
}
)

您使用的

resizeMode

错误

resizeMode

是

组件的一个属性。你必须用一个

包裹

，给

一个

宽度
和
高度
，并使
居中


在样式表中，使用边距元素将图像居中。如果将它们设置为“自动”，它将自动将它们居中。还可以使用“垂直对齐”和许多其他中心零部件。使用此网站可以通过多种其他方式获得更多的上下文和更好的理解，以适合您的用例：
那么我应该做什么呢？您是否尝试将
组件上的
resizeMode
设置为
cover
，而不是它的样式？抱歉，我误解了，我已经更新了代码，还是不走运。我只需要把图片缩小一点，但它在所有设备上看起来都一样。好的，太棒了！谢谢，无论设备大小，这些尺寸都将保持相同的外观？
<View style={{alignItems: 'center', justifyContent: 'center'}}>
    <View style={{width: 100, height: 100}}>
        <Image 
            ...
            resizeMode='cover'
            ...
        />
    </View>
</View>