web-dev-qa-db-fra.com

Débordement d'élément masqué dans React-Native Android

J'ai une application ici où j'ai besoin de mettre le logo dans la barre de navigation. Ce besoin de déborder de la mise en scène. Travaillez bien dans Ios sans problème, mais sous Android, il semble ne pas fonctionner. Je mets le code au bas des images. Comme vous pouvez le constater, j'utilise EStyleSheet, ce qui me permet d'utiliser%.

IOS

 enter image description here

Android

 enter image description here 

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>
);
androidreactjsreact-nativereact-native-android
9
EQuimper

Sous Android, vous ne pouvez pas dessiner en dehors des limites du composant, ce qui est très ennuyant. En guise de solution de contournement, j'utilise généralement les solutions suivantes: Emballez votre composant dans un nouveau <View> qui englobe à la fois l'ancien conteneur et les données qui débordent. Définissez la vue backgroundColor sur 'transparent' pour qu'elle soit invisible et la propriété pointerEvents sur 'box-none' pour que les événements soient propagés aux enfants. Les dimensions de la vue doivent être celles de l'ancien composant supérieur, plus le débordement (dans votre cas, ce n'est que la hauteur), mais je pense que cela devrait également fonctionner avec Flexbox dans certaines circonstances.

15
martinarroyo

C'est un problème assez épique.

Upvote here pour attirer l'attention sur la question.

6
GollyJer

Suite à la réponse de martinarroyo… .. Malheureusement, il a raison, il n’existe actuellement aucun moyen vraiment meilleur. Cependant, réagit-native 0.41 (pas encore stable) promet d’ajouter le support Android pour overflow: visible, ce qui est une bonne nouvelle, car la solution de contournement n’est pas tout. c'est amusant ...

2
Dror Aharon

J'ai eu le même problème et j'ai trouvé cet article incroyable sur medium.com . https://medium.com/entria/solving-view-overflow-in-Android-reactnative-f961752a75cd

Selon l'article, vous pouvez utiliser la bibliothèque react-native-view'overflow (un en-tête de pontage écrit pour prendre en charge le débordement dans Android natif réactif. 

Tout ce que vous avez à faire est d’emballer le composant de débordement dans le <ViewOverflow>. J'espère que cela t'aides!

1
Rachit

Vous pouvez utiliser le module react-native-view-overflow native de Sibelius Seraphini.

En outre, il semble que React Native puisse prendre en charge cette opération dès la version 0.57 selon this commit.

0
TheBaj