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

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

我已经让你的设置在这里工作了。代码也在下面。

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);

我可以想象有一些可能的问题可能会出错。

1. 只是为了确保它不是显而易见的：第二个 div 有高度/宽度吗？如果它的大小为零，您将无法触摸它。我会假设情况并非如此，所以更有可能，
2. 您确定两个处理程序都没有触发吗？如果您不在较小/内部 div 的事件处理程序中调用 event.stopPropagation()，则该事件可以沿链向上传播。在这种情况下，它可能正在执行第一个处理程序，然后传播到第二个处理程序。
3. 根据您的所有 css，可能存在 z-index 或隐藏元素问题，要么将第一个 div 放在第二个 div 的顶部，要么完全隐藏第二个 div (display:none)。

在旁边：

有时会影响到你的一件棘手的事情是 React 实现了自己的事件，而不是原生浏览器事件。这意味着如果您对在 React 处理程序中获得的事件调用 stopPropagation()，它将停止 React 事件的传播，但不会停止底层浏览器事件的传播。所以，如果由于某种原因你在 React 之外有一些事件处理程序（使用 JS 或 jQuery 添加事件处理程序而不是react），那些非 React 处理程序仍然会在你完成 stopPropagation() 后触发。我不认为这是你的问题。