我想通过react-native-vector图标和react-native-router-flux在rightButtonImage上显示Icon

Question

我想在导航变量上显示右键，但没有渲染。 请给我解决方案或一些建议。

错误

  

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

您可以在hideNavBar={true}中使用<Scene>来隐藏router-flux的默认标头，并使用完全可自定义的标头，例如Native-base's标头，而不是它。

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

我试了一下。我在每个页面中完全自定义我的标题。

Answer 2

1. 在hideNavBar

   中使用Router.js道具作为主页组件场景

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

2. 在Home.js组件中使用NavigationBar组件

   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>
   

这是屏幕截图。



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