我在这里有一个应用程序,需要将徽标放入导航栏中。那需要溢出场景布局。在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中,您无法绘制超出组件边界的图形,这是一件很烦人的事情。我通常会采取以下措施作为解决方法:将您的组件包装在新的组件中,该组件<View>
将包装以前的容器和溢出的数据。设置视图backgroundColor
,以'transparent'
使得它是无形的,以及pointerEvents
道具'box-none'
,使事件得到传播给孩子。视图的尺寸应该是前一个顶部组件的尺寸加上上溢的尺寸(在您的情况下,它只是高度),但是我认为这在某些情况下也可以很好地与Flexbox配合使用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句