にはどうすればRNRF

Question

でカスタムナビゲーションバーを透明に私は次のように反応し、ネイティブ・ルータ・フラックス中のすべてのオプションを試してみましたが、作ることができますナビゲーションバー透明反応ナビゲーションを使用して透明にする方法はありますか？反応ネイティブルータフラックスから反応ナビゲーションに変更する必要がありますか？Git Hubの問題として投稿しました ここにリンクがあります： Github issue #2132

反応ナビゲーションを使用するのが難しいので、私はRNRFに切り替えました。カスタムナビバーを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;

navigationBarStyle

に

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

をナビゲーションバー不透明度を設定することにより、半透明のナビゲーションバーを設定しますが、問題は、不透明度を継承される左右のボタンを含む全体のナビゲーションバーでは何を行うことができます0

Answer 1

。 hidenavbar = {true}を設定し、シーンコンポーネントにカスタムナビゲーションバーを実装することをお勧めします。たとえば：シーン2のコンポーネント（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> 
    } 
}