如何在React Native中获取标题按钮

时间:2018-11-27 06:01:12

标签: react-native expo navigationbar

我为导航创建了一个不同的类,以维护loginIn和loginOut用户的状态,如下所示:-

import React from "react";
import { createStackNavigator, createSwitchNavigator, DrawerNavigator } from "react-navigation";

import DrawerContent from "../views/Sidebar"

import Profile from '../views/Profile';
import Extra from '../views/Extra';

import SignIn from '../views/SignIn';

import Home from '../views/Home';
import Info from '../views/Info';
import Logout from '../views/Logout';


export const SignedIn = createStackNavigator({
    Home: {
        screen: Home,
    },
    Profile: {
        screen: Profile,
    },
    Extra: {
        screen: Extra,
    }
});

export const SignedOut = createStackNavigator({
    SignIn: {
        screen: SignIn,
        navigationOptions: {
            title: "Sign Up",
            headerRight: <Text>Hi</Text> //calling this gives an error  
        }
    },
});

export const RootNavigator = (signedIn = false) => {
    return createSwitchNavigator(
        {
            SignedIn: {
                screen: SignedIn,
                navigationOptions: {
                    gesturesEnabled: false
                }
            },
            SignedOut: {
                screen: SignedOut,
                navigationOptions: {
                    gesturesEnabled: false
                }
            }
        }, {
            headerMode: "none",
            mode: "modal",
            initialRouteName: signedIn ? "SignedIn" : "SignedOut"
        }
    );
};

我想在注册屏幕上的导航栏中创建一个按钮,但它给出了如下错误:-Error here

标题标题很容易显示在屏幕上,但是似乎没有出现左右按钮。任何帮助。

1 个答案:

答案 0 :(得分:1)

您的标题按钮必须是组件

您使用的方式未指向有效组件

为此,要么创建一个新组件“ HeaderRight”,然后像对“ Home”组件那样进行导入,然后将headerRight属性指向该组件

headerRight:HeaderRight

或者像这样简单地将您的文本元素包装在括号内

headerRight:(<Text>Hi</Text>)

尝试告诉我是否解决了

最诚挚的问候