React Native 中的全屏图像

Posted 2023-03-15

【中文标题】React Native 中的全屏图像

【英文标题】：Full screen image in React Native

【发布时间】：2015-03-30 15:04:01

【问题描述】：

如何在 React Native 中让 <Image> 填充整个 UIWindow 大小的区域？如果我使用自动布局，我会在每个边缘设置一个约束，但通量是非常不同的范例，我不是网络人。如果没有在我的 <Image> 上设置手动宽度/高度，什么都不会显示，但是我如何动态地告诉样式与其父元素的宽度和高度相同，或者至少是窗口？

【参考方案1】：

您需要使用flexbox。这是一个完整的例子：

'use strict';

var React = require('react-native');

var 
  AppRegistry,
  StyleSheet,
  View,
  Image
 = React;

var TestCmp = React.createClass(
  render: function() 
    return (
      <View style=styles.imageContainer>
        <Image style=styles.image source=uri: 'http://lorempixel.com/200/400/sports/5/' />
      </View>
    );
  
);

var styles = StyleSheet.create(
  imageContainer: 
    flex: 1,
    alignItems: 'stretch'
  ,
  image: 
    flex: 1
  
);

AppRegistry.registerComponent('RCTTest', () => TestCmp);

请注意，您需要一个容器来允许您在其中定义项目的 flex。这里的关键是alignItems: 'stretch'，让imageContainer的内容填满可用空间。

【讨论】：

完美。这几乎就是我所拥有的，只是我使用的是"center" 而不是"stretch"。很多这样的小事，我得弄清楚。谢谢！

是的，我猜你必须设置一个像素宽度才能让它以“中心”出现。请记住，React Native 中的 flexbox 是 flexbox 规范的实现，因此您应该能够使用文档和指南来帮助您掌握它。这是一个好的开始：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

这似乎对我不起作用，我正在使用列表视图来显示图像，列表视图可能会导致此问题吗？

可能。就像我在回答中所说的那样，包含样式也有效果。可能值得提出一个新问题，因为它听起来略有不同，但我唯一要说的是，从技术上讲，这可能比 React Native 更像是一个 flexbox 问题。

有没有办法让图像“适合”全屏？仅当我指定图像的宽度和高度时，这似乎才有效。如果图像大于屏幕，那么你会得到一个居中的剪辑版本，我宁愿让它适合屏幕。我试图看看这是否可以手动进行，但我看不到如何获得可用的屏幕尺寸（或父视图尺寸）以便能够手动调整图像的大小。

【参考方案2】：

如果支持 android 和 ios，您可以使用此代码， 你需要隐藏工具栏和状态栏

隐藏状态栏

return (
        <View style=styles.root_layout>
            <StatusBar hidden=true />
            ...
        </View>
    )

工具栏隐藏

static navigationOptions = 
    header: null