4

反応ネイティブのナビゲーションバーを表示するために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の中で、それは適切な取得しています:

enter image description here

しかし、iPhoneの中で、その適切来ていない:

enter image description here

ここで2番目のImage uナビゲーションバーとTimeRemainingビューの間に1つの灰色の線が表示されました。削除します。

おかげ

+0

ここに同じ問題があります。 shadowOpacity:0とelevation:0を試してみました。影を削除しました。しかし、それは動作していません。 –

答えて

1

問題は、下の境界線は、ヘッダーのスタイルから来ていることをNativeBase のヘッダー・コンポーネントです。この問題を解決するには、hereの問題に応じて、

<Header noShadow={true} hasTabs={true} 

を使用してください。

+0

ありがとう、それは私のために働く –

関連する問題