隐藏在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>中，该backgroundColor包装前容器和溢出数据。将视图'transparent'设置为pointerEvents以使其不可见，将'box-none'道具设置为shp.TextFrame.TextRange.Text = "This is my new text"; var start = shp.TextFrame.TextRange.Find("This is my "); start.InsertAfter("more text "); ，以便将事件传播给子级。视图的尺寸应该是前顶部组件加上溢出的尺寸（在您的情况下，它只是高度），但我认为在某些情况下这也适用于Flexbox。

Answer 2

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

• Github从2015年开始发行 overflow:hidden in React-Native Android
• React Native Known Issus页面
  The overflow style property defaults to hidden and cannot be changed on Android
• 官方React Native请求板上的热门趋势功能请求 Feature Requests - React Native

Upvote here让问题更受关注。

Answer 3

跟进martinarroyo的回答。 不幸的是他是对的，目前还没有更好的方法，但是，本机0.41（不稳定）承诺增加对overflow: visible的Android支持，这是个好消息，因为解决方法不是＆n ＃39; t all all fun ...

Answer 4

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

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

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

Answer 5

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

此外，根据this的提交，React Native似乎可以从版本0.57开始对此提供开箱即用的支持。

Answer 6

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

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