wake-up-neo.com

Elementüberlauf in React-Native Android verborgen

Ich habe hier eine App, wo ich das Logo in die Navigationsleiste setzen muss. Das muss das Szenenlayout überlaufen. Funktioniert gut in Ios ohne Probleme, aber in Android scheint er nicht zu funktionieren. Ich füge den Code am unteren Rand der Bilder ein. Wie Sie sehen, verwende ich EStyleSheet, damit ich% verwenden kann.

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>
);
9
EQuimper

In Android können Sie nicht außerhalb der Grenzen der Komponente zeichnen, was sehr ärgerlich ist. Normalerweise mache ich Folgendes als Workaround: Wickeln Sie Ihre Komponente in einen neuen <View> ein, der sowohl den früheren Container als auch die überlaufenden Daten umschließt. Setzen Sie die Sicht backgroundColor auf 'transparent' so, dass sie unsichtbar ist, und die pointerEvents-Eigenschaft auf 'box-none', damit Ereignisse an Kinder weitergegeben werden. Die Abmessungen der Ansicht sollten die der früheren Top-Komponente plus des Überlaufs sein (in Ihrem Fall ist es nur die Höhe), aber ich denke, dass dies in einigen Fällen auch mit Flexbox gut funktionieren sollte.

15
martinarroyo

Dies ist ein ziemlich bekanntes Problem.

Upvote hier um dem Thema mehr Aufmerksamkeit zu verleihen.

6
GollyJer

Nach der Antwort von martinarroyo . Leider hat er Recht, momentan gibt es keinen wirklich besseren Weg, jedoch verspricht reaktionsfähiges 0.41 (noch nicht stabil), Android-Unterstützung für overflow: visible hinzuzufügen dieser Spaß ...

2
Dror Aharon

Ich hatte ein ähnliches Problem und fand diesen erstaunlichen Artikel auf medium.com https://medium.com/entria/solving-view-overflow-in-Android-reactnative-f961752a75cd

Gemäß dem Artikel können Sie die react-native-view'overflow-Bibliothek verwenden (eine überbrückende Kopfzeile, die zur Unterstützung des Überlaufs in reaktiösem Android geschrieben wurde. 

Alles, was Sie tun müssen, ist, die Überlaufkomponente in den <ViewOverflow> einzuwickeln. Hoffe das hilft!

1
Rachit

Sie können das Modul reag-native-view-overflow native von Sibelius Seraphini verwenden.

Es scheint auch, dass dies von React Native ab Version 0.57 laut this commit standardmäßig unterstützt wird.

0
TheBaj