React Native，TouchableOpacity 包装浮动按钮一无所获

Question

我正在创建一个简单的操作按钮（浮动按钮）

这是有效的：

<View style={{
    width: this.props.size,
    height: this.props.size,
    borderRadius: this.props.size / 2,
    backgroundColor: '#ee6e73',
    position: 'absolute',
    bottom: 10,
    right: 10,
    flexDirection:'row'
}}>
    <Text>
        +
    </Text>
</View>

这不是：

<TouchableOpacity
        onPress={()=>{
        }} >
    <View style={{
        width: this.props.size,
        height: this.props.size,
        borderRadius: this.props.size / 2,
        backgroundColor: '#ee6e73',
        position: 'absolute',
        bottom: 10,
        right: 10,
        flexDirection:'row'
    }}>
        <Text>
            +
        </Text>
    </View>
</TouchableOpacity>

只要用 TouchableOpacity 包裹起来，我的按钮就不会出现任何错误。

反应 0.1.7，Android

然后我尝试将样式从 View 移动到 TouchableOpacity，成功了

<TouchableOpacity
        onPress={()=>{
        }} 
        style={{
            width: this.props.size,
            height: this.props.size,
            position: 'absolute',
            borderRadius: this.props.size / 2,
            backgroundColor: '#ee6e73',
            bottom: 10,
            right: 10,
        }}>
    <Text>
        +
    </Text>
</TouchableOpacity>

谁能解释一下为什么？

React Native 文档说

[https://facebook.github.io/react-native/docs/touchableopacity.html][1]

A wrapper for making views respond properly to touches. This is done without actually changing the view hierarchy, and in general is easy to add to an app without weird side-effects.

这意味着我包装了我的原始视图，它会按我预期的那样工作，但事实并非如此。

Answer 1

根据我的经验，TouchableOpacity 不适用于 absolute 定位。也许如果你删除它，onPress 将再次工作。

另请注意，先渲染什么元素和最后渲染什么元素非常重要。

例如，如果您这样做：

<View>
    <TouchableOpacity style={{position:'absolute'}} onPress={()=> 
           {console.log("It works or not?")}}>
   </TouchableOpacity>
    <Text style={styles.aStyle}>
        Some text bla bla......
    </Text>
</View>

文本很有可能会在 TouchableOpacity 之上呈现，因此您将无法使 onPress 正常工作。

然后因为位置是绝对的，你所要做的就是将它渲染为视图的最后一个子视图：

<View>
    <Text style={styles.aStyle}>
        Some text bla bla
    </Text>
    <TouchableOpacity style={{position:'absolute'}} onPress={()=> 
       {console.log("It works or not?")}}>
   </TouchableOpacity>
</View>

Answer 2

TouchableOpacity 不假定它是父视图的样式。您需要为其提供样式信息。

Answer 3

我知道这已经过时了，但我遇到了这个问题，在将 flex: 1 添加到我的 TouchableOpacity 之前，上面的任何方法都没有用。

Answer 4

经过大量调试后我遇到了类似的问题，我发现负边距是问题所在。

使用 TouchableOpacity 时注意负边距

调试步骤：

删除所有样式
创建没有样式的新组件
确保它在没有样式的情况下工作
然后声明添加您的样式

Answer 5

万一其他人偶然发现了这个问题，并且 none 这些建议有效，我的解决方法是从 react-native 导入 TouchableOpacity 而不是 react-native-gesture-handler

所以

import { TouchableOpacity } from "react-native";

而不是

import { TouchableOpacity } from "react-native-gesture-handler";

React Native，TouchableOpacity 包装浮动按钮一无所获

React Native, TouchableOpacity wrapping floating button get nothing

android

floating-action-button

react-native