Ich möchte Icon auf RightButtonImage von react-native-Vektor-Symbol und reagieren-native-Router-Flux zeigen

Question

Ich möchte rechts auf Navigation var zeigen, aber nichts gerendert. Bitte geben Sie mir eine Lösung oder einen Rat.

Fehler

ExceptionsManager.js: 73 Warnung: Kann nicht während einer bestehenden Zustandsübergang (wie in render oder einer anderen Komponente Konstruktor) aktualisieren. Render-Methoden sollten eine reine Funktion von Requisiten und Zustand sein; Konstruktor-Nebenwirkungen sind ein Anti-Pattern, können aber zu componentWillMount verschoben werden.

Umwelt

"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 und Menu.js zeigen nur Text Komponente

Vielen Dank für das Lesen meines Problems.

Answer 1

Sie können hideNavBar={true} in Ihrem <Scene> verwenden, um die Standard-Header von Router-Flux und verwenden eine vollständig anpassbare Header wie Native-base's Header anstatt sie zu verbergen.

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

Ich habe es versucht. Und ich passe meine Header auf jeder Seite vollständig an.

Answer 2

1. Verwenden hideNavBar Requisiten für Ihre Heim Komponente Szene in Router.js

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

2. Verwenden NavigationBar Komponente in Ihrem Home.js Komponente

   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> 
   

Dies ist der Screenshot wird aussieht.

Mit dieser Art und Weise können Sie Ihre Navigationsleiste vollständig anpassen.