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

Question

我这里有一个应用程序，我需要将徽标放在导航栏中。即需要溢出的场景布局。在 Ios 中工作没有问题，但在 android 中似乎他不工作。我把代码放在图片的底部。如您所见，我使用了 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> 中，该 <View> 包装前一个容器和溢出的数据。将视图 backgroundColor 设置为 'transparent' 以使其不可见，并将 pointerEvents 属性设置为 'box-none'，以便将事件传播给子级。视图的尺寸应该是前一个顶部组件的尺寸加上溢出（在你的例子中，它只是高度），但我认为这在某些情况下也应该很好地与 Flexbox 一起使用。

Answer 2

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

Answer 3

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

Github 2015 年发行
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 引起更多关注。

Answer 4

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

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

Answer 5

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

另外，根据 this commit，React Native 从版本 0.57 开始似乎支持开箱即用。

Answer 6

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

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

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

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

Element overflow hidden in React-Native Android

android

reactjs

react-native

react-native-android

Upvote here 引起更多关注。