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

在此处输入图片说明

错误

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仅显示文本组件

感谢您阅读我的问题。

#1楼 票数:0

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

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

我尝试过这个。 而且我在每个页面中完全自定义了标题。

#2楼 票数:0

  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> 

这是截图。

在此处输入图片说明

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

  ask by hiroga translate from so

未解决问题?本站智能推荐:

1回复

场景,标签(react-native-router-flux)和图标(react-native-vector-icons)

我的路由器文件如下: 一切都按预期工作但我还想要一件事:从'react-native-vector-icons'添加图标来替换标签按钮的'string'。 有人可以协助吗? 我已经安装了react-native-vector-icons并且它的工作非常完美。 谢谢
1回复

react-native-router-flux 图标不会显示在 TabBar 上

我一直在为我的本机应用程序使用 react-native-router-flux 包,用这个替换了 react-navigation 。 但是似乎无法显示图标。 (使用 react-navigation 它确实有效并且图标在那里) 附上我的代码:
1回复

React-Native-Router-flux防止多次点击

我正在使用react-native-router-flux,并且遇到一个问题,当我多次单击Button时,它会多次导航到同一屏幕,如何防止多次点击?
5回复

如何设置react-native-router-flux的样式?

我正在使用react-native-router-flux 4.0.0-beta.17作为我的学习项目。 我需要自定义标题。 例如背景颜色,标题对齐等。我找不到关于它的好文档。 其中一个有类似的东西 但它没有做任何事情。 请给我一些关于好文档的参考,如果可能的话,请给我一些关
2回复

根据登录状态使用React-Native-Router-Flux显示不同的组件

我的应用程序正在使用react-native-router-flux来决定向用户显示哪个Component,具体取决于用户是否 登录或等待应用程序连接到后端(显示<Loading /> ) 登录(显示<Home /> ) 未登录(显示<We
1回复

更改所选标签的图标颜色-react-native-router-flux

在我的reactNative移动应用程序中,我使用如下的底部导航,该导航使用react-native-router-flux 。 BottomNavigation是该组件,每个组件都有5个图标。 如何更改所选图标的颜色?
1回复

react-native-router-flux重置StackNavigation

我对react-native-router-flux有问题,我想在更改选项卡时重置堆栈导航。 我使用backToinitial,但是我需要单击两次以重置我的导航,有人知道为什么吗? }
2回复

react-native-router-flux场景渲染多次

所以我用react-native-router-flux这是我的场景 我有这个按钮,当单击该按钮时,它将转到该场景 如果我多次单击该按钮,将弹出多个场景。 有什么办法可以防止这种情况? 谢谢您的帮助:)