Elementüberlauf versteckt in React-Native Android

Question

Ich habe eine App hier, wo ich das Logo in der Navbar setzen muss. Das muss das Szenenlayout überlaufen lassen. Arbeite gut in Ios ohne Probleme, aber auf Android scheint er nicht zu arbeiten. Ich lege den Code an den unteren Rand der Bilder. Wie Sie sehen können, verwende ich EStyleSheet, damit ich% verwenden kann.

IOS

Android

import React from 'react'; 
import { Scene, Router } from 'react-native-router-flux'; 
import EStyleSheet from 'react-native-extended-stylesheet'; 
import { View, Platform } from 'react-native'; 
import { SmallLogo } from './components'; 
import { checkColor } from './helpers'; 
import { 
    HomeScreen, 
    ImagePickerScreen, 
    WaitingResponseScreen, 
    ResultsScreen 
} from './modules'; 
import Colors from '../constants/Colors'; 

const styles = EStyleSheet.create({ 
    navStyle: { 
    flex: 1, 
    marginTop: '5%', 
    alignItems: 'center', 
    }, 
    logoCircle: { 
    backgroundColor: '$whiteColor', 
    height: 60, 
    width: 60, 
    borderRadius: 30, 
    justifyContent: 'center', 
    alignItems: 'center' 
    } 
}); 

const logoNav = result => (
    <View style={styles.navStyle}> 
    <View style={styles.logoCircle}> 
     <SmallLogo color={checkColor(result)} /> 
    </View> 
    </View> 
); 

const pdTop = Platform.OS === 'ios' ? 64 : 54; 

export default() => (
    <Router 
    sceneStyle={{ paddingTop: pdTop }} 
    navigationBarStyle={{ backgroundColor: Colors.greenColor }} 
    renderTitle={props => { 
     if (props.result) { 
     return logoNav(props.result); 
     } 
     return logoNav(null); 
    }} 
    backButtonTextStyle={{ color: Colors.whiteColor }} 
    leftButtonIconStyle={{ tintColor: Colors.whiteColor }} 
    > 
    <Scene 
     key="home" 
     component={HomeScreen} 
    /> 
    <Scene 
     key="imagesPicker" 
     hideBackImage 
     component={ImagePickerScreen} 
    /> 
    <Scene 
     key="waitingResponse" 
     backTitle="Back" 
     component={WaitingResponseScreen} 
    /> 
    <Scene 
     key="results" 
     backTitle="Back" 
     initial 
     component={ResultsScreen} 
    /> 
    </Router> 
); 

Answer 1

In Android Sie können nicht außerhalb der Komponente Grenzen ziehen, was eine sehr ärgerliche Sache ist. Ich mache normalerweise Folgendes als Workaround: Wickeln Sie Ihre Komponente in eine neue <View>, die sowohl den ehemaligen Container und die überlaufenden Daten umschließt. Setzen Sie die Ansicht backgroundColor auf 'transparent', so dass es unsichtbar ist, und die pointerEvents Prop zu 'box-none', so dass Ereignisse an Kinder weitergegeben werden. Die Dimensionen der Ansicht sollten die der ehemaligen Top-Komponente plus dem Überlauf sein (in deinem Fall ist es nur die Höhe), aber ich denke, das sollte unter bestimmten Umständen auch mit Flexbox funktionieren.

Answer 2

Follow-up auf martinarroyo's Antwort. Leider hat er Recht, derzeit gibt es keinen besseren Weg, aber reactive-native 0.41 (noch nicht stabil) verspricht, Android-Unterstützung für overflow: visible hinzuzufügen, das ist eine gute Nachricht, weil die Problemumgehung ist nicht so viel Spaß ...

Answer 3

Dies ist als ziemlich episch bekanntes Problem.

• Github Ausgabe von 2015
  overflow:hidden in React-Native Android
• Reagieren Mutter Bekannte Issos Seite
  The overflow style property defaults to hidden and cannot be changed on Android
• Top Trending Feature-Anfrage auf die offizielle Reaktion india Anfrage Bord.
  Feature Requests - React Native

Upvote here das Thema mehr Aufmerksamkeit zu bringen.