【问题标题】：Element overflow hidden in React-Native AndroidReact-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>
);

【问题讨论】：

标签： android reactjs react-native react-native-android

【解决方案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

Upvote here 引起更多关注。

【讨论】：

【解决方案3】：

跟进 martinarroyo 的回答。不幸的是他是对的，目前没有更好的方法，但是，react-native 0.41（还不稳定）承诺为overflow: visible 添加android支持，这是个好消息，因为解决方法并不是那么有趣......

【讨论】：

一年后：这有什么结果吗？
@wahid_abdul 我认为是的。我刚刚从 0.55 更新到 0.57，副作用之一是 View 的内容溢出了它的边界。为了解决这个问题，我使用了overflow: hidden，它成功了。尚未对此进行进一步测试。

【解决方案4】：

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

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

您需要做的就是将溢出组件包装在<ViewOverflow> 中。希望这会有所帮助！

【讨论】：

【解决方案5】：

您可以使用 Sibelius Seraphini 的 react-native-view-overflow 原生模块。

此外，根据this 提交，从 0.57 版开始，React Native 似乎可以开箱即用地支持这一点。

【讨论】：

【解决方案6】：

这是我自溢出以来一直在使用的解决方法：可见在 Android 上无法正常工作。

https://medium.com/@jaredgoertzen/react-native-android-doesnt-render-overflow-styles-95e69154ebed

【讨论】：