android - React Native，TouchableOpacity包装的 float 按钮什么都没有

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

这正在工作:

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



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

最佳答案

以我的经验，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>

很有可能将Text呈现在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>

关于android - React Native，TouchableOpacity包装的 float 按钮什么都没有，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34139687/