隐藏在 React-Native Android 中的元素溢出

IT技术 android reactjs react-native react-native-android
2021-05-11 07:17:16

我在这里有一个应用程序,我需要将徽标放在导航栏中。那需要溢出场景布局。在 Ios 中运行良好没有问题,但在 android 中似乎他不工作。我把代码放在图像的底部。正如您所看到的,我使用 EStyleSheet,以便让我使用 %.

IOS

在此处输入图片说明

安卓

在此处输入图片说明

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>
);
4个回答

在 Android 中,您不能在组件边界之外进行绘制,这是一件非常烦人的事情。我通常会执行以下操作作为解决方法:将您的组件包装在一个新的<View>包装中,该包装包装前一个容器和溢出的数据。设置视图backgroundColor,以'transparent'使得它是无形的,以及pointerEventsprops'box-none',使事件得到传播给孩子。视图的尺寸应该是前顶部组件加上溢出的尺寸(在您的情况下,它只是高度),但我认为这在某些情况下也应该很好地与 Flexbox 配合使用。

这是一个非常史诗般的已知问题。

在这里投票以引起更多关注。

跟进martinarroyo的回答。不幸的是,他是对的,目前没有真正更好的方法,但是,react-native 0.41(尚未稳定)Promise添加 android 支持,overflow: visible这是个好消息,因为解决方法并不是那么有趣......

我遇到了类似的问题,我在 medium.com 上发现了这篇很棒的文章。 https://medium.com/entria/solving-view-overflow-in-android-reactnative-f961752a75cd

根据文章,您可以使用react-native-view'overflow库(为支持 react-native android 中的溢出而编写的桥接头)。

您需要做的就是将溢出组件包装在<ViewOverflow>. 希望这可以帮助!