我正在使用react-native-router-flux v4.0库在react-native中显示导航栏。
这里我创建了一个自定义导航栏。
这是我的代码:
_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 中得到了正确的结果,例如:
但在 Iphone 中它无法正常运行:
在这里,如果您看到第二张图片,您会在导航栏和 TimeRemaining View 之间看到一条灰线,我想将其删除。
谢谢
最佳答案
问题出在 NativeBase 的 header 组件中 底部边框线来自标题样式。所以根据提出的问题here ,使用,
<Header noShadow={true} hasTabs={true}
解决此问题。
关于react-native - 如何在react-native IOS中隐藏或删除阴影或bottomBorder,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47806909/