Élément de débordement caché dans Réagissent-Natif Android
J'ai une application là où j'ai besoin de mettre le logo dans la barre de navigation. Ce besoin de dépassement de la scène mise en page. Fonctionnent bien dans Ios sans aucun problème, mais dans android sembler comme il ne fonctionne pas. J'ai mis le code au bas de l'image. Comme vous pouvez le voir j'utilise EStyleSheet afin que permettez-moi d'utiliser %.
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>
);
OriginalL'auteur EQuimper | 2017-01-28
Vous devez vous connecter pour publier un commentaire.
Dans Android, vous ne pouvez pas attirer l'extérieur de l'élément de limites, ce qui est très ennuyeux. J'ai l'habitude de faire ce qui suit comme une solution de contournement: Enveloppez votre composant dans une nouvelle
<View>
qui englobe à la fois le contenant ancien et le débordement des données. Définir la vuebackgroundColor
à'transparent'
de sorte qu'il est invisible, et lepointerEvents
prop à'box-none'
, de sorte que les événements se propage à des enfants. Les dimensions de la vue doivent être ceux de l'ancien haut de composante plus le débordement (dans votre cas, il est juste à la hauteur), mais je pense que cela doit aussi fonctionner avec Flexbox bien dans certaines circonstances.OriginalL'auteur martinarroyo
C'est assez épique problème connu.
overflow:hidden dans Réagissent-Natif Android
Le débordement de la propriété de style par défaut cachés et ne peut pas être changé sur Android
Demandes De Fonctionnalités - Réagir Natif
Upvote ici à porter la question de plus d'attention.
OriginalL'auteur GollyJer
Suivi martinarroyo de réponse.
Malheureusement, il est vrai, actuellement il n'y a pas de meilleure façon, cependant, de réagir natif de 0,41 (pas stable encore) promet d'ajouter le soutien android pour
overflow: visible
qui est une excellente nouvelle, parce que la solution de contournement n'est pas tout que de plaisir...1 an plus tard: ne rien venir de cela?
Son 0.57 maintenant, et je ne pense pas qu'il fonctionne encore
Je pense qu'il n'. Je viens de mettre à jour à partir de 0,55 à 0,57 et l'un des effets secondaires était de Vue du contenu débordant à l'extérieur de ses limites. Pour corriger cela, j'ai utilisé
overflow: hidden
et cela a fonctionné. N'ai pas testé plus loin.OriginalL'auteur Dror Aharon
J'ai eu le même problème et j'ai trouvé cet article fascinant sur medium.com.
https://medium.com/entria/solving-view-overflow-in-android-reactnative-f961752a75cd
Selon l'article, vous pouvez utiliser
react-native-view'overflow
de la bibliothèque (un pont-tête de l'écrit à l'appui de l'débordement dans réagissent-native android.Tout ce que vous devez faire est d'envelopper le overflowcomponent dans le
<ViewOverflow>
. Espérons que cette aide!OriginalL'auteur Rachit
Vous pouvez utiliser le réagir-native-vue-débordement module natif par Sibelius Seraphini.
Aussi, il semble que cela pourrait être pris en charge hors de la boîte par Réagir Natif de commencer avec la version 0.57 selon cette commettre.
OriginalL'auteur TheBaj
C'est une solution que j'utilise depuis overflow: visible ne fonctionne pas correctement sur Android.
https://medium.com/@jaredgoertzen/react-native-android-doesnt-render-overflow-styles-95e69154ebed
OriginalL'auteur Jared Goertzen