我想通过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

您可以在<Scene>使用hideNavBar={true}隐藏路由器通量的默认头，并使用完全可自定义的头（例如Native-base的头）代替它。

<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> 

这是截图。

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