如何在RNRF中使自定義導航欄透明

Question

我已經嘗試了react-native-router-flux中的所有選項，例如： navigationBarStyle或navTransparent ，還有navigationBarStyle={[STYLES.navBar]}在試圖使自定義導航欄透明時，所有這些都不起作用。是否有任何方法可以使用react-navigation使它透明，並且應該將它從react-native-router-flux更改為react-navigation，我將其發布為Git Hub中的問題，這里是鏈接： Github問題＃2132

因為我發現使用反應導航很難，所以我已切換到RNRF，除了從RNRF切換到RN之外，是否有任何解決方案可以使自定義navBar透明化，或者是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; 

這是我的Router.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>
   }
 }