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

【问题标题】：I want to show Icon on rightButtonImage by react-native-vector icon and react-native-router-flux我想通过 react-native-vector 图标和 react-native-router-flux 在 rightButtonImage 上显示图标
【发布时间】：2017-08-15 23:47:51
【问题描述】：

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

错误

ExceptionsManager.js:73 警告：在现有状态转换期间无法更新（例如在render 或其他组件的构造函数中）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至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 只显示文本组件

感谢您阅读我的问题。

【问题讨论】：

你可以试试这个 rightButtonImage={require('this.state.bookIcon')}

标签： react-native react-native-router-flux

【解决方案1】：

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

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

我试过了。我完全自定义每个页面的标题。

【讨论】：

【解决方案2】：

在Router.js 中为您的 Home 组件场景使用 hideNavBar 道具

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

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

这是屏幕截图的样子。

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

【讨论】：