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;
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>
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.