如何在RNRF中使自定义导航栏透明

Question

I have tried all the options in react-native-router-flux like: navigationBarStyle or navTransparent and also navigationBarStyle={[STYLES.navBar]} all of these are not working while trying to make the custom navigation bar transparent Is there any ways to make it transparent using react-navigation and should I change from react-native-router-flux to react-navigation to do this I have posted it as an issue in Git Hub here is the link : Github issue #2132

since I found it hard using react-navigation I have switched to RNRF is there any solution to make the custom navBar transparent other than switching from RNRF to RN or is it a bug in RN

here's the code that i use in my NavBar.js file :

 import { View, Image, StatusBar, TouchableWithoutFeedback } from 'react-native'; import React, { Component } from 'react'; import { Actions } from 'react-native-router-flux'; class NavBar extends Component { render() { return ( <View style={styles.backgroundStyle}> <StatusBar /> <View style={{ flexDirection: 'row' }}> <TouchableWithoutFeedback onPress={() => Actions.pop()}> <Image source={require('./Images/back-arrow.png')} style={styles.backarrowStyle} /> </TouchableWithoutFeedback> <Image source={require('./Images/help.png')} style={styles.helpStyle} /> <Image source={require('./Images/setting.png')} style={styles.settingStyle} /> </View> </View> ); } } const styles = { backgroundStyle: { backgroundColor: 'transparent', }, backarrowStyle: { resizeMode: 'contain', flexDirection: 'row', width: 55, height: 55, left: 0, justifyContent: 'flex-start' }, helpStyle: { resizeMode: 'contain', width: 50, height: 50, left: 210, justifyContent: 'flex-end', position: 'relative' }, settingStyle: { resizeMode: 'contain', width: 50, height: 50, justifyContent: 'flex-end', position: 'relative', left: 210 } }; export default NavBar; 

and this is my Router.js file:

 import React from 'react'; import { Scene, Router } from 'react-native-router-flux'; import MainScreen from './components/MainScreen'; import ChallengeScreen from './components/ChallengeScreen'; import NavBar from './components/NavBar'; import Toss from './components/Toss'; const RouterComponent = () => { return ( <Router> <Scene key="root"> <Scene key="homeScreen" component={MainScreen} hideNavBar={1} /> <Scene key="screen2" component={ChallengeScreen} navBar={NavBar} /> <Scene key="screen3" component={Toss} navBar={NavBar} /> </Scene> </Router> ); }; export default RouterComponent; 

Answer 1

What you can do is set semi-transparent navbar by setting navbar opacity in navigationBarStyle

<Scene key="scene2" component={ChallengeScreen} 
       navigationBarStyle={{opacity:0.3}}/> 

but the problem is the whole navbar including left and right button will be inherit the opacity. I recommend just set hidenavbar={true} and implement custom navbar in the scene component. For eg: in Scene2 component (ChallengeScreen)

 render() {
     const customNavbar = {
       <View style={{position:'absolute', top:0, flexDirection:'row', justifyContent:'space-between', backgroundColor:'transparent', padding:10}}>
           <TouchableOpacity>
            <Text>Left Button</Text>
           </TouchableOpacity>
           <Text>Title</Text>
           <TouchableOpacity>
              <Text>Right Button</Text>
           </TouchableOpacity>
       </View>
    }

   return () {
     <View style={{flex:1}}>
         {customNavbar}
         <View></View>
     </View>
   }
 }