Question

我的问题

当我将按钮样式的位置更改为绝对位置时该按钮的上半部分显示了单击按钮的效果，但是navigation（'Login'）功能不起作用但是按钮的下半部分可以正常使用。

预期行为

当按钮样式的位置是绝对的时，我希望无论我在哪里按下按钮都能正常工作。

代码示例

import React, { Component } from 'react';
import { Button } from 'react-native-elements';
import { StyleSheet, Text, View } from 'react-native';

<View style={styles.grade_view}>
  <Text style={styles.grade_text}>aaaa</Text>
  <Text style={styles.grade_num}>-</Text>
  <Button
  onPress={() => {
    navigate('Login');
  }}
  buttonStyle={{
      backgroundColor: '#AAA',
      width: 140,
      height: 40,
      position: 'absolute',
      borderRadius: 20,
      top: -45,
      right: 10
  }}
  type="solid"
  title="login"
  color="#AAA"
  />
</View>

const styles = StyleSheet.create({
  grade_view: {
    padding: 15,
    borderColor: '#999',
    borderBottomWidth: 1
  },
  grade_num: {
    marginTop: 5,
    fontSize: 26,
    fontWeight: 'bold',
  },
  grade_text: {
    fontSize: 16,
    color: '#AAA'
  }
});

环境

react-native-cli：2.0.1

反应性：0.58.4

节点：v10.15.0

npm：6.4.1

测试设备：iPhone X-12.1（XCode虚拟设备）

反应本机环境信息：

系统：

操作系统：macOS 10.14.2

CPU：（4）x2英特尔®酷睿TM i5-7360U CPU @ 2.30GHz

内存：34.14 MB / 8.00 GB

Shell：3.2.57-/ bin / bash

二进制文件：

节点：10.15.0-/ usr / local / bin / node

npm：6.4.1-/ usr / local / bin / npm

SDK：

iOS SDK：

平台：iOS 12.1，macOS 10.14，tvOS 12.1，watchOS 5.1

IDE：

Android Studio：3.2 AI-181.5540.7.32.5056338

Xcode：10.1 / 10B61-/ usr / bin / xcodebuild

npmPackages：

反应：^ 16.6.3 => 16.6.3

本机反应：0.58.4 => 0.58.4

npmGlobalPackages：

react-native-cli：2.0.1

Answer 1

也许按钮的一半上方呈现了一些东西？您是否尝试过检查？如果是这种情况，我会将海拔高度与绝对位置一起使用，但默认情况下它将仅在Android上运行。一个方便签出的库（如果是这样）：https://github.com/alekhurst/react-native-elevated-view

当按钮样式为绝对位置时，按钮的上半部分不起作用

我的问题

预期行为

代码示例

环境

1 个答案: