我想显示在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组件是截图意志的样子。

使用这种方式，你可以完全自定义您的导航栏。