Question

我正在尝试在iOS上的React-Native应用程序中的ListView上放置一个浮动按钮。外观很棒，但我的TouchableHighlight的功能并不是那么好......

<TouchableHighlight
   onPress={() => {
   this.myAction()
   }}>
   <View style={styles.floatingCameraButton}>
       <Image source={camera_icon} style={styles.cameraIcon}/>
   </View>
</TouchableHighlight>

这是我的按钮代码，这是我的样式：

floatingCameraButton: {
   height: 80,
   width: 80,
   borderRadius: 40,
   backgroundColor: '#aa2222',
   position: 'absolute',
   bottom: 20,
   right: 20,
   shadowColor: '#000000',
   shadowOpacity: 0.8,
   shadowRadius: 2,
   shadowOffset: {
     height: 5,
     width: 5
   },
},

由于某种原因，当触摸屏幕下部的按钮时，触摸无法在按钮上注册。

我已经测试过让按钮更高并且向上移动，这两个都是解决方案，但不是我感兴趣的。

我的假设是，React-Native以某种方式屏蔽了iOS本机Tab Bar所在的触摸（意味着底部50px）。但是，我在屏幕上没有Tab Bar，也没有实现一个。我的导航器正在包裹我的按钮所在的视图，不确定是否可能是罪魁祸首。

让我的TouchableHighlight在屏幕底部50px上可触摸的任何想法或帮助将非常有帮助。

Answer 1

尝试将样式应用于TouchableHighlight本身。

<TouchableHighlight
   style={styles.floatingCameraButton}
   onPress={() => this.myAction()}>
       <Image source={camera_icon} style={styles.cameraIcon}/>
</TouchableHighlight>

为什么触摸不会在React-Native的屏幕底部注册？

1 个答案: