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

Posted 2023-04-13

技术标签:

【中文标题】React-Native Android 中隐藏的元素溢出【英文标题】：Element overflow hidden in React-Native Android 【发布时间】：2017-06-14 05:13:24 【问题描述】：

我在这里有一个应用程序，我需要将徽标放在导航栏中。那需要溢出场景布局。在 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>
);

【问题讨论】：

【参考方案1】：

在 Android 中，您不能在组件的边界之外进行绘制，这是一件非常烦人的事情。作为一种解决方法，我通常会执行以下操作：将您的组件包装在一个新的 <View> 中，该 <View> 包装了以前的容器和溢出的数据。将视图backgroundColor 设置为'transparent' 使其不可见，并将pointerEvents 属性设置为'box-none'，以便将事件传播给子级。视图的尺寸应该是前一个顶部组件加上溢出的尺寸（在你的情况下，它只是高度），但我认为这在某些情况下也应该很好地与 Flexbox 一起使用。

【讨论】：

【参考方案2】：

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

2015 年 Github 问题overflow:hidden in React-Native Android React Native 已知问题页面The overflow style property defaults to hidden and cannot be changed on Android 官方 React Native 请求板上的热门功能请求。Feature Requests - React Native