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

【问题标题】：React Native Button absolute position not working on real iOS specific deviceReact Native Button 绝对位置在真实的 iOS 特定设备上不起作用
【发布时间】：2020-02-02 16:31:44
【问题描述】：

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

有人知道这个问题吗？

环境
反应原生 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'
    },
});

【问题讨论】：

标签： ios react-native

【解决方案1】：

在某些情况下，绝对位置在 ios 中无法正常工作。你应该用一个：

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

【讨论】：

你对这个肯定有参考吗？

【解决方案2】：

在你的按钮上使用padding，它会解决的。

【讨论】：

【解决方案3】：

在这种情况下，您需要使用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% 屏幕宽度和高度相同。

尺寸作为设备特定的。所以它会根据设备屏幕的高度和宽度占据相同的位置。

【讨论】：

【解决方案4】：

通过包裹绝对位置视图修复。

  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'
        },
    });

【讨论】：