Element overflow hidden in Reagieren Nativen Android
Habe ich eine app hier, wo ich das logo in der navbar. Müssen überlauf der Szene layout. Arbeiten Sie auch in der Ios-mit kein problem, aber bei android scheint er nicht zu arbeiten. Ich den code am unteren Rand der Bilder. Wie Sie sehen können, ich benutze EStyleSheet so lassen Sie mich %.
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>
);
InformationsquelleAutor EQuimper | 2017-01-28
Du musst angemeldet sein, um einen Kommentar abzugeben.
In Android kann man nicht zeichnen, die außerhalb der Komponente die Grenzen, das ist eine sehr ärgerliche Sache. Normalerweise mache ich die folgende provisorische Lösung: Wickeln Sie Ihre Komponente in einem neuen
<View>
umschließt sowohl die ehemaligen container-und die überlaufenden Daten. Legen Sie die view -backgroundColor
zu'transparent'
so, dass es unsichtbar ist, und diepointerEvents
prop zu'box-none'
, so dass Veranstaltungen erhalten Sie weitergegeben an die Kinder. Die Maße der Ansicht sein sollte, die der ehemalige top-Komponente plus der überlauf (in Ihrem Fall, es ist nur die Höhe), aber ich denke, das sollte auch funktionieren mit Flexbox gut in einigen Fällen.InformationsquelleAutor martinarroyo
Dies ist so ziemlich epische bekanntes Problem.
overflow:hidden im Reagieren-Native Android
Die overflow-style-Eigenschaft ist standardmäßig ausgeblendet und kann nicht geändert werden auf Android
Feature-Anfragen Zu Reagieren Nativen
Upvote hier zu bringen, das Thema mehr Aufmerksamkeit.
InformationsquelleAutor GollyJer
Folgenden bis auf martinarroyo Antwort.
Leider hat er Recht, aktuell gibt es keine wirkliche bessere Weg, allerdings reagieren-native 0.41 (noch nicht stabil) verspricht zum hinzufügen von Unterstützung für android
overflow: visible
was ist eine gute Nachricht, weil die Problemumgehung ist nicht alles, was Spaß macht...1 Jahr später: hat alles, was daraus kommen?
Seine 0.57 jetzt, und ich glaube nicht, dass es funktioniert immer noch
Ich denke, es ist. Ich habe gerade aktualisiert von 0,55 0,57 und eine der Nebenwirkungen war der Ansicht, der Inhalt überlaufen außerhalb der Grenzen. Um das zu beheben, benutzte ich
overflow: hidden
- und es funktionierte. Noch nicht getestet, weiter.InformationsquelleAutor Dror Aharon
Ich hatte das ähnliche problem und ich fand diese erstaunliche Artikel auf medium.com.
https://medium.com/entria/solving-view-overflow-in-android-reactnative-f961752a75cd
Laut dem Artikel, die Sie verwenden können
react-native-view'overflow
Bibliothek (bridging-header geschrieben werden, um die Unterstützung der überlauf in reagieren-native android.Alles, was Sie tun müssen, ist, wickeln Sie die overflowcomponent in der
<ViewOverflow>
. Hoffe, das hilft!InformationsquelleAutor Rachit
Können Sie die reagieren-native-view-überlauf native-Modul von Sibelius Seraphini.
Auch, so scheint es, könnte dies out of the box unterstützt, indem Sie Reagieren Nativen ab version 0.57 laut diese Begehen.
InformationsquelleAutor TheBaj
Dies ist ein workaround habe ich seither mit overflow: visible funktioniert nicht richtig auf Android.
https://medium.com/@jaredgoertzen/react-native-android-doesnt-render-overflow-styles-95e69154ebed
InformationsquelleAutor Jared Goertzen