Tengo el siguiente componente en React Native:
<View style={{ flex: 1, width: "100%", backgroundColor: "white" }} > <View style={{ position: "absolute", top: 20, left: 20, height: 100, width: 100, backgroundColor: 'red' }}> <TouchableWithoutFeedback onPress={() => console.log("clicked")}> <View style={{ position: "absolute", top: 20, left: 20, height: 200, width: 200, backgroundColor: 'blue'}}> </View> </TouchableWithoutFeedback> </View> </View>Esto representa la siguiente pantalla:
Ahora, cuando hago clic en la parte del componente secundario (azul) que está fuera del componente principal (rojo), no registra "clic" en Android. Pero cuando ejecuto esta aplicación en iOS, registra un "clic" cuando se hace clic fuera del elemento principal en el componente secundario.
¿Cuál es la razón por la que funciona en iOS pero no en Android? ¿Debo usar un componente diferente específicamente para Android?
Gracias por adelantado.
Información de versión:
Salida de información nativa de reacción:
System: OS: macOS 12.0.1 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 157.67 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.10.0 - /var/folders/0k/l1gbyzj91lzg98pqcyp95xl40000gn/T/yarn--1653119182599-0.2342745454309867/node Yarn: 1.22.18 - /var/folders/0k/l1gbyzj91lzg98pqcyp95xl40000gn/T/yarn--1653119182599-0.2342745454309867/yarn npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm Watchman: 2022.03.21.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7784292 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 15.0.2 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.3 => 0.64.3 react-native-macos: Not FoundEste es un problema general para dispositivos Android y este problema no se ha resuelto. Encontrará una larga discusión abierta sobre esto aquí en Github .
Sin embargo, esto se puede resolver al no permitir que el contenedor principal maneje el posicionamiento de sus elementos secundarios y maneje esto con un posicionamiento absoluto usted mismo, lo que está haciendo de todos modos. Por lo tanto, cada uno de los contenedores de posición absoluta no debe estar dentro de la misma vista principal.
Lo siguiente resuelve el problema en Android mientras sigue trabajando en iOS.
<> <View style={{ width: "100%", backgroundColor: "white" }} > <View style={{ position: "absolute", top: 20, left: 20, height: 100, width: 100, backgroundColor: 'red' }}></View> </View> <TouchableWithoutFeedback onPress={() => console.log("clicked")}> <View style={{ position: "absolute", top: 40, left: 40, height: 200, width: 200, backgroundColor: 'blue'}}></View> </TouchableWithoutFeedback> </>Tenga en cuenta que he creado la superposición deseada del componente azul y rojo ajustando su posición. El evento táctil ahora funciona como se esperaba en Android. He probado esto solo en dispositivos físicos (Android e iOS).