如何在 react-native IOS 中隐藏或删除阴影或底部边框
Posted
技术标签:
【中文标题】如何在 react-native IOS 中隐藏或删除阴影或底部边框【英文标题】：How to hide or remove shadow or bottomBorder in react-native IOS 【发布时间】：2017-12-14 06:10:19 【问题描述】：我正在使用 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 视图之间看到一条灰色线，我想将其删除。
谢谢
【问题讨论】：
这里有同样的问题。我试过 shadowOpacity: 0 和 elevation:0 来去除阴影。但它不起作用。 【参考方案1】：问题出在NativeBase 的标头组件中 底部边框线来自 Header 样式。所以根据here提出的问题，使用，
<Header noShadow=true hasTabs=true
解决这个问题。
【讨论】：
【参考方案2】：它迟到但更准确的答案， 在你的路由器中添加这一行来管理影子：
<Router
navigationBarStyle= ...Platform.select(
ios:
// marginTop: StatusBar.currentHeight
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
)
>
【讨论】：
以上是关于如何在 react-native IOS 中隐藏或删除阴影或底部边框的主要内容，如果未能解决你的问题，请参考以下文章
React-native：如何从 Windows 构建 ios
在 react-native 中隐藏和显示带有动画的 createBottomTabNavigator 选项卡栏
没有 react-native 是不是可以在 Android 和/或 iOS 的后台任务中收集地理位置信息？
如何在WebView中禁用用户文本选择[React-Native]