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

【问题标题】：React Native, TouchableOpacity wrapping floating button get nothingReact Native，TouchableOpacity 包装浮动按钮一无所获
【发布时间】：2015-12-07 17:34:11
【问题描述】：

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

这是有效的：

<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 包裹，然后我的按钮就不会显示而不会出现任何错误。

React 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]

用于使视图正确响应触摸的包装器。这是在不实际更改视图层次结构的情况下完成的，并且通常很容易添加到应用中而不会产生奇怪的副作用。

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

【问题讨论】：

有什么方法可以发布 this.props.size 的值？另外，您使用位置是否有特定原因：绝对？谢谢。
是的，我使用 position: absolute 将按钮浮动在其他按钮的前面。 this.props.size 用于设置此按钮的大小。这是一个数字。例如

标签： android react-native floating-action-button

【解决方案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 的最后一个子节点：

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

【讨论】：

我可能会浪费几天的调试时间，感谢您提供组件订购部分:)
哇。非常感谢你。这种定位解决方案上次对我有用?对我有用

【解决方案2】：

我知道这已经过时了，但我遇到了这个问题，直到将 flex: 1 添加到我的 TouchableOpacity 之前，上述方法均无效。

【讨论】：

【解决方案3】：

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

【讨论】：

只是什么样式信息让这个对你有用？

【解决方案4】：

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

使用 TouchableOpacity 时注意负边距

调试步骤：

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

【讨论】：