为什么onPress在呈现新视图后不执行，而是在其以本机响应方式呈现之前执行？

如何解决为什么onPress在呈现新视图后不执行，而是在其以本机响应方式呈现之前执行？

我正在改编agora.io社区创建的项目。基础项目在这里：https://github.com/AgoraIO-Community/Agora-RN-Quickstart。快速浏览其中的App.tsx文件将使您对该文件进行调整。也很容易下载和运行

现在，最初，项目运行正常，开始和结束呼叫按钮都可以直接使用。尽管对于我的游戏而言，它需要一些UI和功能更新。在更新动态呼叫开始/结束按钮并添加呼叫时间用户界面的过程中。

问题：加载了_renderVideos()返回的视图后，突然间，结束呼叫按钮不想执行其onPress。开始调用函数是异步的，因此需要一两秒钟才能呈现新视图。在这第二个窗口中，可以按下结束通话按钮，并执行其功能。

这是我的一些改编：

import React from 'react';
import { View,Text,NativeModules,ScrollView,ActivityIndicator,TouchableOpacity,Dimensions,Platform,StyleSheet } from 'react-native';
import RtcEngine,{ RtcLocalView,RtcRemoteView,VideoRenderMode } from 'react-native-agora';
import requestCameraAndAudioPermission from '../androidChatPermissions.js'
import * as Colors from '../assets/colors'

const AGORA_APP_ID = '<...>';
const { height,width } = Dimensions.get('window');

interface Props {
    userId: string
}

interface State {
    appId: string,channelName: string,joinSucceed: boolean,peerIds: number[],callStarted: boolean,continuityModal: boolean,endCallModal: boolean,microphoneMuted: boolean,roomNotification: string,clockRunning: boolean,clockTime: string,chatSec: number,chatMin: number
}

export default class Chatroom extends React.Component<Props,State> {
    _engine?: RtcEngine
    clock: Timestamp

    static navigationOptions = {
        headerShown: false
    }

    constructor(props) {
        super(props)
        this.state = {
            appId: AGORA_APP_ID,joinSucceed: false,peerIds: [],channelName: 'channel-x',callStarted: false,continuityModal: false,endCallModal: false,microphoneMuted: false,roomNotification: null,clockRunning: false,clockTime: null,chatSec: null,chatMin: null
        }
        if (Platform.OS === 'android') [
            requestCameraAndAudioPermission().then(_ => {
                console.log('permissions requested')
            })
        ]
    }

    componentDidMount() {
        this.init()
    }

    init = async () => {
       // no changes from base project's App.tsx
    }

    startCall = async () => {
        await this._engine?.joinChannel(null,this.state.channelName,null,0)
        this.setState({ callStarted: true },() => this.runClock())
    }

    endCall = async () => {
        console.log("end call pressed")
        await this._engine?.leaveChannel()
        this.setState({ peerIds: [],callStarted: false })
    }

    runClock() {
        console.log("clock running")
    }

    render() {
        return (
            <View style={styles.max}>
                <View style={[styles.max,{ backgroundColor: 'blue' }]}>
                    <View style={styles.detailsWrapper}>
                        {!this.state.callStarted ? (
                            <TouchableOpacity
                                onPress={this.startCall}
                                style={[styles.button,{ backgroundColor: Colors.PRIMARY_GREEN }]}>
                                <Text style={styles.buttonText}> Start Call </Text>
                            </TouchableOpacity>
                        ) : (
                                <View style={{ marginTop: 20 }}>
                                    <Text>{this.state.chatTime}</Text>
                                    <TouchableOpacity
                                        onPress={this.endCall}
                                        style={[styles.button,{ backgroundColor: Colors.PRIMARY_ACTION }]}>
                                        <Text style={styles.buttonText}> End Call </Text>
                                    </TouchableOpacity>
                                </View>
                            )}
                    </View>
                    {this._renderVideos()}
                </View>
            </View>
        )
    }

    _renderVideos = () => {
        const { joinSucceed } = this.state
        return joinSucceed ? (
            <View style={styles.fullView}>
                <RtcLocalView.SurfaceView
                    style={styles.max}
                    channelId={this.state.channelName}
                    renderMode={VideoRenderMode.Hidden} />
                {this._renderRemoteVideos()}
            </View>
        ) : null
    }

    _renderRemoteVideos = () => {
        const { peerIds } = this.state
        return (
            <ScrollView
                style={styles.remoteContainer}
                contentContainerStyle={{ paddingHorizontal: 2.5 }}
                horizontal={true}>
                {peerIds.map((value,index,array) => {
                    return (
                        <RtcRemoteView.SurfaceView
                            style={styles.remote}
                            uid={value}
                            channelId={this.state.channelName}
                            renderMode={VideoRenderMode.Hidden}
                            zOrderMediaOverlay={true} />
                    )
                })}
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    max: {
        flex: 1,},detailsWrapper: {
        position: 'absolute',top: 50,alignSelf: 'center',height: 100,width: width,alignItems: 'center',flex: 1,flexDirection: 'row',justifyContent: 'space-evenly',borderWidth: 1,borderColor: 'red'
    },button: {
        paddingHorizontal: 20,paddingVertical: 10,borderRadius: 10,buttonText: {
        color: '#fff',fontWeight: 'bold'
    },fullView: {
        width: width,height: 50,backgroundColor: '#333'
    },remoteContainer: {
        width: '100%',height: 150,position: 'absolute',top: 5
    },remote: {
        width: 150,marginHorizontal: 2.5
    },noUserText: {
        paddingHorizontal: 10,paddingVertical: 5,color: '#0093E9',})

如您所见，到目前为止，我所做的唯一更改是几个日志，setState之后的其他函数调用，动态按钮渲染以及一些样式调整。很奇怪，一切似乎都冻结或被阻止，Command + R和Command +我也不起作用

为什么endCall按钮的onPress只在新视图呈现之前执行？

解决方法

这里的问题与我更新了detailWrapper的绝对位置有关。渲染函数中详细信息包装和_renderVideos排序的方式通过覆盖renderVideos容器下端的不可见部分来影响结束调用按钮。因为检查员没有工作而无法看到它。

最终有两个修复程序：

1. 我要做的是在详细信息包装样式上添加zIndex

2. 但我想您也可能会弄混渲染中视图的顺序。因为绝对定位的视图将与包围的父视图绝对定位