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> 

내가 좋아하는 안드로이드에 적절한 점점 오전 :

여기 내가 사용

enter image description here

그러나

아이폰에서의 적절한 오지 않을 :

enter image description here

여기에 두 번째가 보이면 Image u 탐색 막대와 TimeRemaining보기 사이에 하나의 회색 선이 있음이를 제거하고 싶습니다.

감사

+0

여기에서 같은 문제가 발생합니다. shadowOpacity : 0을 시도하고 그림자를 제거하는 데 elevation : 0을 사용했습니다. 하지만 작동하지 않습니다. –

답변

1

문제는 아래쪽 테두리 선이 헤더 스타일에서 오는 것을 NativeBase 의 헤더 구성 요소입니다. 따라서이 문제를 해결하기 위해 here 제기 된 문제에 따라

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

을 사용하십시오.

+0

감사합니다 그것은 나를 위해 작동합니다. –