react-native的TouchableNativeFeedback 组件包含Image组件时显示问题？

Question

在TouchableNativeFeedback组件中点击时会有涟漪的视觉效果，当点在其包含的<Image/>组件上，涟漪的中心点就变成左上角了，本应该是手指碰触的位置，Text上面却不会，这个如何解决？
代码入下：

class ReactApp extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <View style={styles.app}>
        <StatusBar backgroundColor="#ff4578" barStyle="light-content"/>
        <View style={styles.tabBar}>
          <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('#ff4578', false)}>
            <View style={styles.tabItem}>
              <Image style={styles.icon} source={require('./assets/home-active.png')} />
              <Text style={styles.tabText}>图库</Text>
            </View>
          </TouchableNativeFeedback>
          <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('#ff4578', false)}>
            <View style={styles.tabItem}>
              <Image style={styles.icon} source={require('./assets/user-active.png')} />
              <Text style={styles.tabText}>我的</Text>
            </View>
          </TouchableNativeFeedback>
        </View>
      </View>
    )
  }
}

Answer 1

可以尝试在外层 View 添加 pointerEvents='box-only' 属性, 使其子元素不可被触控
例如

<TouchableNativeFeedback>
    <View style={styles.tabItem} pointerEvents='box-only'>
        <Image style={styles.icon} source={require('./assets/home-active.png')} />
        <Text style={styles.tabText}>图库</Text>
    </View>
</TouchableNativeFeedback>