为什么onPress不在渲染新视图后执行，而是在react native中渲染之前执行

Question

我正在调整agora.io社区创建的项目。基础项目在这里：https://github.com/AgoraIO-Community/Agora-RN-Quickstart.快速浏览一下App.tsx文件，就会发现该文件正在进行调整。也易于下载和运行

现在，项目一开始运行良好，开始和结束调用按钮都可以开箱即用。不过，它需要一些UI和功能更新来完成我的游戏。在更新动态调用开始/结束按钮的过程中，添加了一个调用时间ui。

问题：一旦加载了_renderVideos()返回的视图，结束调用按钮突然不想执行其onPress。start调用函数是异步的，所以渲染新视图需要一两秒钟的时间。在这对夫妇的第二个窗口中，可以按下结束呼叫按钮，并执行其功能。

以下是我的一些改编作品：

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: [], joinSucceed: false, 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,
height: 150,
marginHorizontal: 2.5
},
noUserText: {
paddingHorizontal: 10,
paddingVertical: 5,
color: '#0093E9',
},
})

正如您所看到的，到目前为止，我所做的唯一更改是几个日志、setState之后的额外函数调用、动态按钮渲染和一些样式调整。这很奇怪，一切似乎都被冻结或阻止了，Command+R和Command+I都不工作

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

Answer 1

这里的问题与我更新detailsWrapper时使用的绝对定位有关。细节包装器和_renderVideos在render函数中的排序方式通过覆盖renderVideos容器下端的不可见部分影响了结束调用按钮。因为检查员不在工作，所以没能看到它。

最终有两个解决方案：

1. 我所做的是在细节包装样式上添加zIndex

2. 但我想你也可以打乱渲染中视图的顺序。因为绝对定位的视图将绝对定位为与封装父视图相关