Question

我在WebView上的绝对位置放了一个按钮。
此按钮可在任何模拟器和iPhone 5s真实设备上使用，但不适用于iPhone Plus真实设备。
点击时该按钮会做出反应，但不会触发onPress。将位置设为相对位置时有效。
所有模拟器和设备都是相同的iOS版本（12.2）。

有人知道这个问题吗？

环境
React Native 0.56
iOS 12.2

import React, { Component } from 'react';
import { ActivityIndicator, BackHandler, Keyboard, NetInfo, Platform, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View, WebView } from 'react-native';
import { Button, Icon } from 'react-native-elements'

export default class SignInScreen extends React.Component {
    constructor(props) {
        super(props)
    }

    handleBackPress() {
        this.refs['WEBVIEW_REF'].goBack()
        return true
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar backgroundColor="white" barStyle="dark-content" />
                <WebView
                    ref="WEBVIEW_REF"
                    bounces={false}
                    source={{ uri: 'https://example.com' }}
                    style={styles.container}
                />
                <Button
                    onPress={this.handleBackPress.bind(this) }
                    buttonStyle={styles.buttonBack}
                    title=""
                    icon={{
                    name: 'chevron-left',
                    type: 'material-community',
                    iconStyle: { color: global.color.normal }
                    }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    buttonBack: {
        width: 45,
        height: 45,
        position: 'absolute',
        left: 10,
        bottom: 60,
        backgroundColor: '#bfbfbf',
        opacity: 0.9
    },
    container: {
        flex: 1,
        paddingTop: 25,
        backgroundColor: '#fff'
    },
});

Answer 1

在按钮上使用padding，即可解决。

Answer 2

在这种情况下，您需要使用Dimensions。例如，在您的情况下，您可以像这样使用它：

buttonBack: {
  width: Dimensions.get('window').width/100*10,
  height: Dimensions.get('window').height/100*10,
  position: 'absolute',
  left: Dimensions.get('window').width/100*2,
  bottom: Dimensions.get('window').height/100*5,
  backgroundColor: '#bfbfbf',
  opacity: 0.9
},

Dimensions.get（'window'）。width / 100 * 10表示设备总数的10％屏幕宽度和高度相同。

维度是特定于设备的。因此，根据设备屏幕的高度和宽度，它将处于相同的位置。

Answer 3

通过包装绝对位置视图固定。

  render() {
            return (
                <View style={styles.container}>
                    <StatusBar backgroundColor="white" barStyle="dark-content" />
                    <WebView
                        ref="WEBVIEW_REF"
                        bounces={false}
                        source={{ uri: 'https://example.com' }}
                        style={styles.container}
                    />
                   <View style={styles.navContainer}>
                        <Button
                           onPress={this.handleBackPress.bind(this) }
                           buttonStyle={styles.buttonBack}
                           title=""
                           icon={{
                               name: 'chevron-left',
                               type: 'material-community',
                               iconStyle: { color: global.color.normal }
                           }}
                        />
                    </View>
                </View>
            );
        }
    }

    const styles = StyleSheet.create({
        buttonBack: {
            width: 45,
            height: 45,
            left: 10,
            backgroundColor: '#bfbfbf',
            opacity: 0.9
        },
        // moved from buttonBack style
        navContainer: {
            position: 'absolute',
            bottom: 60
        },
        //
        container: {
            flex: 1,
            paddingTop: 25,
            backgroundColor: '#fff'
        },
    });

Answer 4

在ios中，绝对位置有时无法正常工作。您应该使用：

<View style={{position:'absolute',...other styles}}>
<Button/> // without position style
<View>

React Native Button绝对位置在真正的iOS特定设备上不起作用

4 个答案: