Переполнение элемента скрыто в Android-сообществе React-Native

Question

У меня есть приложение, где мне нужно разместить логотип на навигационной панели. Это необходимо для переполнения макета сцены. Хорошо работать в Йосе без проблем, но в андроиде кажется, что он не работает. Я помещаю код внизу изображений. Как вы можете видеть, я использую EStyleSheet, чтобы позволить мне использовать%.

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

В Android вы не можете рисовать за пределами границ компонента, который является очень раздражающая вещь. В качестве обходного пути я обычно делаю следующее: оберните свой компонент в новый <View>, который обертывает как прежний контейнер, так и переполненные данные. Установите вид backgroundColor на 'transparent' так, чтобы он был невидим, а pointerEvents - 'box-none', чтобы события распространялись на детей. Размеры представления должны быть у прежнего верхнего компонента плюс переполнение (в вашем случае это только высота), но я думаю, что это должно также хорошо работать с Flexbox в некоторых обстоятельствах.

Answer 2

В ответ на ответ Мартинарройо. К сожалению, он прав, в настоящее время нет реального лучшего способа, однако, реагировать-родной 0.41 (еще не стабильный) обещает добавить поддержку android для overflow: visible, что является отличной новостью, потому что обходным решением является не все, что весело ...

Answer 3

Это довольно эпическая известная проблема.

• Github выпуск с 2015
  overflow:hidden in React-Native Android
• Реагировать Родную ИЗВЕСТНОЙ Иссу странице
  The overflow style property defaults to hidden and cannot be changed on Android
• Top запрос отклоняющихся функций на официальные Реагировать Native запроса платы.
  Feature Requests - React Native

Upvote here довести этот вопрос больше внимания.