我希望React原生图像的宽度为可用屏幕宽度的50%,不修改图像的宽高比.

有什么解决办法吗?

推荐答案

使用resize mode cover并将宽度设置为ScreenWidth/2您可以使用Dimensions组件重新设置屏幕宽度

//Get screen width using Dimensions component 
var {width} = Dimensions.get('window');
//....
//In image style 
image:{
   width: width * 0.5
}
//In render function
<Image resizeMode = 'cover' style = {styles.image}/>

Edit adding overflow

//add overflow : visible 
<Image resizeMode = 'cover' style = {[styles.image,{overflow: 'visible'}]}/>

React-native相关问答推荐

复制__自持props

使用react native 杀死应用程序后蓝牙仍处于活动状态

如何在react-native 中设置视图的自动高度

React Native 的 Firebase 初始错误(无法读取未定义的属性getItem)

从 .apk 到 .aab 的本地构建版本react,如何将应用程序发送给客户端?

React Native:在 ScrollView contentContainerStyle 上设置 flex:1 会导致组件重叠

如何在 React Native 中创建和保存 CSV 文件?

中彼此相邻对齐(Align) react native

迷失在 Ionic、Cordova 等混合应用程序框架中

在 React Native 中无法滚动到 ScrollView 的底部

React Native ScrollView 在snapping后重新回到顶部

React Native:ScrollView 中的 TouchableOpacity onPress 问题

React Native with Typescript and Jest 在 0.57 更新后被 destruct :Couldn't find preset "module:metro-react-native-babel-preset" relative to directory

将图标添加到drawer抽屉react-navigation v5

ENOENT: no such file or directory, 打开 'android/app/src/main/assets/index.android.bundle'

是否需要使用 StyleSheet.create?

如何将props传递给 React Navigation 导航器中的组件?

iOS ActionSheet 的 Android 类似功能

React-Native ios App 在没有报告的情况下崩溃

React Native 不支持在 Windows 上开发?