React Native，TouchableOpacity包装的浮动按钮什么都没有 [英] React Native, TouchableOpacity wrapping floating button get nothing

问题描述

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

I'm creating a simple action button (floating button)

这正在工作:

<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包装，然后我的按钮就不会出现任何错误.

Just wrap with TouchableOpacity then my button not show up without any errors.

React 0.1.7，Android

React 0.1.7, Android

然后我尝试将样式从View更改为TouchableOpacity，这是可行的

Then I try move styling from View to TouchableOpacity, It's work

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

有人可以解释一下为什么吗?

Can any one explain me why?

说说本机文档

[ 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.

这意味着我包装了原始视图，并且可以按预期工作，但事实并非如此.

This mean I wrap my original view and it would work as I expected, But it's not.

推荐答案

根据我的经验，TouchableOpacity在absolute定位中不能很好地工作.也许您删除它后，onPress将再次起作用.

From my experience, TouchableOpacity does not work well with absolute positioning. Perhaps if you remove that, the onPress will work again.

还请注意，首先渲染什么元素以及最后渲染什么是极其重要的.

Also please note that it is EXTREMELY important what element you render first and what you render last.

例如，如果您这样做:

<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正常工作.

There is a pretty good chance that the Text will be rendered on top of the TouchableOpacity, therefore you won't be able to get the onPress working.

然后，由于位置是绝对的，因此您只需将其呈现为View的最后一个子代即可.

Then since the position is absolute, all you have to do is render it as the last child of the View:

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

这篇关于React Native，TouchableOpacity包装的浮动按钮什么都没有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！