隐藏在React-Native Android中的元素溢出 [英] Element overflow hidden in React-Native Android

问题描述

我这里有一个应用程序，需要在徽标中放入徽标.那需要溢出场景布局.在Ios上工作正常，没有问题，但是在android中似乎他没有工作.我将代码放在图像的底部.如您所见，我使用EStyleSheet，以便让我使用％.

I have an app here where I need to put the logo in the navbar. That need to overflow the scene layout. Work well in Ios with no problem but in android seem like he not working. I put the code at the bottom of the images. As you can see I use EStyleSheet so that let me use %.

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

推荐答案

在Android中，您不能绘制超出组件边界的图形，这是一件很烦人的事情.我通常将以下方法作为解决方法:将您的组件包装在新的< View> 中，该组件将包装以前的容器和溢出的数据.将视图 backgroundColor 设置为'transparent'，使其不可见，将 pointerEvents 属性设置为'box-none'code>，以便事件传播到子级.视图的尺寸应该是前一个顶部组件的尺寸加上上溢的尺寸(在您的情况下，它只是高度)，但是我认为这在某些情况下也可以很好地与Flexbox配合使用.

In Android you cannot draw outside of the component's boundaries, which is a very annoying thing. I usually do the following as a workaround: Wrap your component in a new <View> that wraps both the former container and the overflowing data. Set the view backgroundColor to 'transparent' so that it is invisible, and the pointerEvents prop to 'box-none', so that events get propagated to children. The dimensions of the view should be those of the former top component plus the overflow (in your case, it is just the height), but I think this should also work with Flexbox nicely in some circumstances.

这篇关于隐藏在React-Native Android中的元素溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！