[英]Element overflow hidden in React-Native Android
我在这里有一个应用程序,我需要将徽标放在导航栏中。 那需要溢出场景布局。 在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>
);
在Android中,你不能在组件的边界之外绘制,这是一件非常讨厌的事情。 我通常会执行以下操作作为解决方法:将组件包装在新的<View>
,该<View>
包装前容器和溢出数据。 将视图backgroundColor
设置为'transparent'
,使其不可见,并将pointerEvents
支持为'box-none'
,以便将事件传播给子视图。 视图的尺寸应该是前顶部组件加上溢出的尺寸(在您的情况下,它只是高度),但我认为这在某些情况下也适用于Flexbox。
这是一个非常史诗般的已知问题。
跟进martinarroyo的回答。 不幸的是他是对的,目前没有真正更好的方法,但是,本机0.41(不稳定)承诺增加对overflow: visible
android支持overflow: visible
这是好消息,因为解决方法并不是那么有趣......
我有类似的问题,我在medium.com上发现了这篇惊人的文章。 https://medium.com/entria/solving-view-overflow-in-android-reactnative-f961752a75cd
根据这篇文章,你可以使用react-native-view'overflow
库(一个桥接头来编写,以支持react-native android中的溢出。
您需要做的就是将overflowcomponent包装在<ViewOverflow>
。 希望这可以帮助!
您可以使用Sibelius Seraphini的react-native-view-overflow本机模块。
此外,根据此提交,似乎React Native可以从版本0.57开始支持开箱即用。
这是我自溢出以来一直使用的一种解决方法:可见在Android上无法正常工作。
https://medium.com/@jaredgoertzen/react-native-android-doesnt-render-overflow-styles-95e69154ebed
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.