Question

我是新来的本地人，我正在学习基础知识。

构建我的第一个应用程序时，我遇到了一个问题。我正在使用expo在我的S9上运行它

问题

我正在尝试使用导航标签，但是当我尝试import MainTabNavigator from './navigation/MainTabNavigator';

时

我收到以下错误：

[22:46:34] ReferenceError: Can't find variable: RootStack

This error is located at:
    in App (at registerRootComponent.js:35)
    in RootErrorBoundary (at registerRootComponent.js:34)
    in ExpoRootComponent (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)
* App.js:17:9 in render
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:8811:23 in finishClassComponent
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:12924:25 in performUnitOfWork
- ... 16 more stack frames from framework internals

为什么找不到Rootstack？即使我导入了它。

我也尝试过申请

tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },

致const Tab = createBottomTabNavigator

但是它不会返回样式，而是似乎无法识别它。

App.js

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator,createBottomTabNavigator } from 'react-navigation';
import MainTabNavigator from './navigation/MainTabNavigator';


export default class App extends React.Component {

    render() {
        return <RootStack />;
    }
}

MainTabNavigator.js

import React from 'react';
import { Platform,View, Text, StyleSheet, } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, } from 'react-navigation';

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Home',


    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
            </View>
        );
    }
} 

class SettingsScreen extends React.Component {
    static navigationOptions = {
        title: 'Settings',
    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Settings Screen</Text>
            </View>
        );
    }
}

class WalletsScreen extends React.Component {
    static navigationOptions = {
        title: 'Wallet',

    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Wallet Screen</Text> 
            </View>
        );
    }
}

const Tab = createBottomTabNavigator({ 

    Home: {
        screen: HomeScreen,
    },
    Wallet: {
        screen: WalletsScreen,
    },
    Settings: {
        screen: SettingsScreen,
    },


});


const RootStack = createStackNavigator({

    Home1: {
        screen: Tab,

    },
});

Answer 1

我认为您的问题是您没有导出RootStack。请尝试这个，让我知道：

export const RootStack = createStackNavigator({
  Home1: {
    screen: Tab,
  },
});

，当您尝试导入时，请按以下步骤操作：

import {RootStack} from './navigation/MainTabNavigator'

如果要在一行中导出MainTabNavigator的所有内容，请在文件末尾添加：

export { RootStack, Tab}

对于样式问题，请发布完整的代码以查看发生的情况。

关于样式和导入TabNavigation的两个快速问题

1 个答案: