具有绝对位置的嵌套可触摸 [英] Nested Touchable with absolute position

问题描述

我需要实现一个对象可点击的界面，但该对象的一个​​区域执行另一个操作，如下所示:

I need to implement an interface where an object is clickable, but an area of this object does another action, like this:

|-----------|
|        |  | -> clicking on this small area does an action
|        ---|
|           |
|           |
|           | -> clicking on this area does another action
|           |
|-----------|

我做了一个类似这个结构的实现:

I did an implementation similar this structure:

<View> // Container
  <Touchable onPress={do X}> // Large area
  <Touchable onPress={do Y} style={{position: absolute, top: 0, right: 0}}> // Small area
</View>

问题是小区域永远不会激活 onPress 道具.事件总是在大区域触发.

The problem is that the small area never activate the onPress props. The event is always triggered on the large area.

有人可以帮我吗?

谢谢！

推荐答案

我不确定你是否有任何样式可以显示小容器，但是如果没有宽度或高度，则不会触发，因此请检查确保您已设置宽度和高度:

I'm not sure if you have any styling to show for the small container, but if there is no width or height, it will not trigger, so check to make sure you have set up a width and height:

smallContainer: {
    width: 120, // set this
    height:100, // set this
    position:'absolute',
    top:0,
    right:0
}

我已经让您的设置在此处工作.代码也在下面.

I've gotten your setup working here. Code is also below.

https://rnplay.org/apps/StpOXg

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var SampleApp = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <View style={{flexDirection:'row'}}> 
          <TouchableHighlight onPress={ () => alert('largeContainer') } style={styles.container1}>
                    <View><Text>Hello1</Text></View>
            </TouchableHighlight>
          <TouchableHighlight onPress={ () => alert('smallContainer') }  style={styles.container2}>
                <View><Text>Hello2</Text></View>
            </TouchableHighlight>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1
  },
  container1: {
    width:320,
    height:300,
    backgroundColor: 'red'
  },
  container2: {
    width: 120,
    height:100,
    position:'absolute',
    backgroundColor: 'green',
    top:0,
    right:0
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

这篇关于具有绝对位置的嵌套可触摸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！