问题描述
我正在使用 react-native-router-flux v4.0 库在 react-native 中显示导航栏.
I am using react-native-router-flux v4.0 library for showing navigation bar in react-native.
这里我创建了一个自定义导航栏.
Here I created a custom navigation bar.
这是我的代码:
_renderLeft() {
return (
<TouchableOpacity
style={{justifyContent: 'flex-start', alignItems: 'flex-start', alignSelf: 'flex-start'}}
onPress={Actions.pop}>
<Image
style={{width: 24, height: 24}}
resizeMode="contain"
source={require('../../assets/images/ico_swipe.png')}></Image>
</TouchableOpacity>
)
}
_renderMiddle() {
return (
<View style={[styles.navBarTitleView]}>
<Text style={[styles.navBarTitle]}>{this.props.title}</Text>
</View>
)
}
_renderRight() {
return (
<TouchableOpacity
style={{justifyContent: 'flex-start', alignItems: 'flex-start', alignSelf: 'flex-start'}}
onPress={Actions.pop}>
<Image
style={{width: 24, height: 24}}
resizeMode="contain"
source={require('../../assets/images/ico_home.png')}></Image>
</TouchableOpacity>
)
}
render() {
StatusBar.setBarStyle('light-content', true);
return (
<Header style={[styles.container]}>
<Left style={{flex: 1}}>
{this._renderLeft()}
</Left>
<Body style={{flex: 3}}>
<Title style={styles.navBarTitle}>{this.props.title}</Title>
</Body>
<Right style={{flex: 1}}>
{this._renderRight()}
</Right>
</Header>
)
}
这是我的风格:
const styles = StyleSheet.create({
container: {
backgroundColor: AppColors.colorToolBar,
elevation:0
},
navBarTitleView: {
flex: 2,
},
navBarTitle: {
fontSize: 20,
fontFamily: AppStyles.fontFamilyMedium,
color: AppColors.white,
alignSelf: 'center'
},
menuItem:{
flex: 1, flexDirection: 'row', padding: 20
},
menuTitle:{flex: 20, justifyContent: 'flex-start', alignItems: 'center',
alignSelf: 'flex-start'},
menuNextArrow:{flex: 1}
});
这里我用过:
<Stack key="Key" hideTabBar>
<Scene key="Key"
navBar={MyCustomNavBarLocation}
component={myFileLocation}
title="Round 1"
onLeft={Actions.pop}
BackHandler={Actions.pop}
back
/>
</Stack>
我在 Android 中正确使用它，例如:
I am getting it proper in Android like:
但在 Iphone 中它不合适:
But in Iphone its not coming proper:
在这里，如果您看到第二张图片，您会看到导航栏和 TimeRemaining 视图之间的一条灰色线，我想将其删除.
Here If u see the second Image u saw one grey Line between navigation bar and TimeRemaining view I want to remove that.
谢谢
推荐答案
问题出在 NativeBase 的 Header 组件中底部边框线来自 Header 样式.因此，根据此处提出的问题，使用，
The issue is in Header component of NativeBaseThat bottom border line is coming from the Header style. So according to the issue raised here, use,
<Header noShadow={true} hasTabs={true}
用于解决此问题.
这篇关于如何在 react-native IOS 中隐藏或删除阴影或底部边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！