反応ネイティブのナビゲーションバーを表示するためにreact-native-router-flux v4.0ライブラリを使用しています。反応ネイティブIOSでシャドーまたはボトムボーダーを非表示にする方法
ここではカスタムナビゲーションバーを作成しました。ここで
は私のコードです:ここでは
_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の中で、その適切来ていない:
ここで2番目のImage uナビゲーションバーとTimeRemainingビューの間に1つの灰色の線が表示されました。削除します。
おかげ
ここに同じ問題があります。 shadowOpacity:0とelevation:0を試してみました。影を削除しました。しかし、それは動作していません。 –