小编use*_*841的帖子

我在真正的Android设备上使用React Native.在主应用程序组件上只使用以下渲染功能创建一个非常简单的应用程序时......

render() {
  <Image
    source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}}
    style={
      {
        flex: 1,
        resizeMode: 'contain',
        backgroundColor: 'yellow'
      }          
    } />
}

我在我的设备上得到以下结果:

正如你所看到的那样整个背景是黄色的,这告诉我们图像元素确实占据了整个屏幕的大小.但这只是错误的.'cover'resizeMode确实按预期工作('stretch'模式也是如此).这是"包含"模式不起作用(从我的角度来看最重要的模式).将图像放在ListView上时问题变得更加严重,因为图像甚至都没有显示.

更新1 正如弗雷德里克所指出的,"包含"仅在图像大于容器大小时才有效.那么我们怎样才能让图像在保持纵横比的同时占据整个容器的大小？React中的样式尚不支持百分比,并且我不知道如何在加载图像后获取图像宽度和高度属性.与Image组件关联的任何事件都不提供该信息.

更新2 好消息.我现在正在使用React Native v0.24.1,现在看起来图像'包含'模式正如预期的那样工作,即使实际图像大小小于其容器.zvona的解决方案很好(尽管你需要记住,onLayout会给你渲染图像的图像视图大小,但不是正在加载的实际图像大小).至于现在,我不知道有什么方法可以找出实际的图像大小(让我们假设你是从网络资源中检索图像而你不知道大小,如果你想计算它可能非常重要它的宽高比).

我正在运行反应本机0.24.1并且<TouchableOpacity>当它放在一个组件内时我遇到了组件的问题<ScrollView>.

它的onPress事件很好,但有一个特殊情况,他们没有.如果<TouchableOpacity>你有一个组件<TextInput>,并且当前焦点在<TextInput>盒子上,那么你可以点击它<TouchableOpacity>,你会看到它的onPress事件不会被触发.

至少你第一次这样做.一旦焦点<TextInput>不再存在,您现在可以按下该<TouchableOpacity>组件,其onPress事件将会正常启动.

请注意,如果<TouchableOpacity>组件放在一个<View>而不是<ScrollView>一切按预期工作,并且上述问题不适用.

以下是一些演示此问题的代码:

const React = require('react-native');
const {
  Component,
  Dimensions,
  View,
  ScrollView,
  Text,
  TextInput,
  TouchableOpacity,
} = React;


// ----------------------------------------------------------------------------
class TouchableOpacityTest extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {count_onPress:0,count_onPressIn:0,count_onPressOut:0,count_onLongPress:0};
  }
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  onPressEvent(what,e) {
    console.log('what:',what);
    let newState = {};
    newState['count_'+what] = ++this.state['count_'+what];
    this.setState(newState);
  }
  // …