Question

我正在expo中从事一个简单的本机项目。我在一个场景中有一个登录页面，在另一个场景中有一个选项卡导航器。我要实现的是登录成功时通过路由将Loginpage切换到HomePage（选项卡导航器）。我的主文件My App.js如下所示：

import React, { Component } from 'react';
import { StyleSheet, Button } from 'react-native';
import { Scene, Router, Actions, Stack } from 'react-native-router-flux';
import LoginPage from './components/LoginPage';
import TestPage from './components/TestPage';
import HomePage from './components/HomePage';

type Props = {};
export default class App extends Component<Props> {
  render() {

    return (
      <Router>
        <Stack>
          <Scene key="First" component={HomePage}  initial = {true} hideNavBar={true} />
          <Scene key="Second" component={LoginPage} hideNavBar={true} />
          <Stack>
            <Scene key="Third" component={LoginPage} />
          </Stack>
        </Stack>
      </Router>

    );
  }
}

const styles = StyleSheet.create({});

由于我没有以编程方式编写成功登录时切换场景的代码，因此我将场景设为路线中的第一个场景来对其进行测试。当我要测试我的LoginPage时，请执行以下操作：

<Scene key="First" component={LoginPage}  initial = {true} hideNavBar={true} />

上面显示的很好，但是当我要测试我的主页时，它是“导航器”选项卡：

<Scene key="First" component={HomePage}  initial = {true} hideNavBar={true} />

我收到以下错误：

> (0 , _reactNavigation.TabNavigator) is not a function
  Evaluating module://components/HomePage.js.js
  Evaluating module://App.js.js
  Loading module://App.js
TypeError: (0 , _reactNavigation.TabNavigator) is not a function
    at Object.eval (module://components/HomePage.js.js!transpiled:58:60)
    at eval (module://components/HomePage.js.js!transpiled:78:4)
    at eval (module://components/HomePage.js.js!transpiled:79:3)
    at eval (<anonymous>)
    at [snack internals]
    at Object.n ([snack internals]
    at e.evaluate ([snack internals]
    at He ([snack internals]
    at [snack internals]
    at https://s3.us-west-1.amazonaws.com/snack-web-player-staging/35/static/js/app.7b999a95.chunk.js:1:14289

我真的很困惑，我觉得这是一个依赖问题，但是我不确定如何解决。我的HomePage.js的代码段如下：

import React, { Component } from 'react';
import FirstPage from './fragments/FirstPage';
import SecondPage from './fragments/SecondPage';
import ThirdPage from './fragments/ThirdPage';
import FourthPage from './fragments/FourthPage';
import {
    StackNavigator,
    TabNavigator,
    DrawerNavigator
} from 'react-navigation';

export default class HomePage extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <SimpleAppNavigator/>
        )
    }
}
const SimpleAppNavigator = TabNavigator({
    page1: {screen: FirstPage},
    page2: {screen: SecondPage},
    page3: {screen: ThirdPage},
    page4: {screen: FourthPage}
},{
     initialRouteName: 'page1',
     swipeEnabled: true,
     animationEnabled: true,
     lazy: false,
     tabBarPosition:'bottom',
 });

Answer 1

如果尚未安装react-navigation-tabs，请先安装，然后使用createBottomTabNavigator代替TabNavigator：

import { createBottomTabNavigator } from 'react-navigation-tabs';

// ...

const SimpleAppNavigator = createBottomTabNavigator({
    // ...
})

检查Tab navigation以获得更多详细信息。

每当我尝试将选项卡导航添加到我的本机应用程序时，都会出现以下错误“（（0，_reactNavigation.TabNavigator）不是函数”

1 个答案: