我怎樣才能讓自定義導航欄透明的RNRF

Question

我已經嘗試了所有的選項中作出反應本地路由器通量，如：navigationBarStyle或navTransparent也 navigationBarStyle={[STYLES.navBar]} 所有這些試圖使自定義不工作導航欄是否透明有沒有什麼方法使用react-navigation使它透明，我應該從react-native-router-flux改變爲react-navigation來做到這一點我已將它作爲Git Hub中的一個問題發佈它 這裏是鏈接： Github issue #2132

因爲我發現它很難使用react-navigation我已經切換到RNRF是否有任何解決方案使自定義navBar透明，而不是從RNRF切換到RN或者是在RN

的錯誤下面是我在NavBar.js文件中使用的代碼：

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;

，這是我的路由器。 js文件：

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

你可以做的是通過navigationBarStyle

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

設置導航欄設置不透明度爲半透明導航欄，但問題是整個導航欄，包括左，右按鈕將被繼承的不透明度。我建議只設置hidenavbar = {true}並在場景組件中實現自定義導航欄。例如：在Scene2組件（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> 
    } 
}