我想顯示在rightButtonImage上的圖標通過react-native-vector圖標和react-native-router-flux

Question

我想在導航var上顯示右鍵，但沒有呈現任何東西。 請給我解決方案或一些建議。

錯誤

ExceptionsManager.js：73警告：現有的狀態轉變（如render或另一組件的構造內）期間不能更新。渲染方法應該是道具和狀態的純粹功能;構造函數的副作用是反模式，但可以移動到componentWillMount。

環境

"react": "16.0.0-alpha.12", 
    "react-native": "0.47.1", 
    "react-native-router-flux": "^4.0.0-beta.17", 
    "react-native-vector-icons": "^4.3.0" 

App.js

import React, { Component } from 'react'; 
import Router from './Router'; 

class App extends Component { 
    render() { 
     return (
      <Router /> 
     ) 
    } 
} 
export default App; 

Router.js

import React, { Component } from 'react'; 
import { View } from 'react-native' 
import { Actions, Scene, Router } from 'react-native-router-flux'; 
import Icon from 'react-native-vector-icons/Ionicons'; 

import Home from './components/Home'; 
import Menu from './components/Menu'; 

class RouterComponent extends Component { 

    constructor(){ 
     super() 
     this.state = {bookIcon: null} 
    } 

    componentWillMount(){ 
     Icon.getImageSource('ios-book', 30).then(source => 
     this.setState({bookIcon:source})); 
    } 

    render(){ 
     return (
      <Router> 
       <Scene key="container"> 
        <Scene 
         key="home" component={Home} 
         initial={true} 
         title={"Home"} 
         rightButtonImage={this.state.bookIcon} 
         rightButtonIconStyle={{ width: 30, height: 30 }} 
         onRight={() => Actions.Menu() } 
        /> 
        <Scene 
         key="menu" 
         component={Menu} 
         title={"Menu"} 
        /> 
       </Scene> 
      </Router> 
     ) 
    } 
}; 
export default RouterComponent; 

• Home.js和Menu.js只顯示文本組件

謝謝你閱讀我的問題。

Answer 1

您可以在<Scene>中使用hideNavBar={true}隱藏router-flux的默認標頭，並使用完全可定製的標頭，而不是像Native-base's標頭。

<Scene key="pageKey" hideNavBar={true}> 

我試過了。我在每一頁都完全自定義我的標題。

Answer 2

1. 使用hideNavBar在Home.js組件

   import NavigationBar from 'react-native-navbar'; 
   import { Icon } from 'native-base'; 
   
   ... 
   
   const rightButtonConfig = { 
       title: 'Save', 
       tintColor: 'blue', 
       handler:() => console.log('Saved'), 
   }; 
   
   const titleConfig = { 
       title: 'Home', 
   }; 
   
   <View> 
       <NavigationBar 
       title={titleConfig} 
       rightButton={rightButtonConfig} 
       leftButton={ 
        <Icon name='ios-arrow-back' onPress={() => Actions.pop()} /> 
       } 
       style={styles.navbarStyle} 
       /> 
   </View> 
   

此道具爲您的家庭組成部分場景在Router.js

<Scene 
    key={'home'} 
    component={HomeComponent} 
    hideNavBar 
    title='Home' 
/> 

使用NavigationBar組件是截圖意志的樣子。

使用這種方式，你可以完全自定義您的導航欄。