Два быстрых вопроса относительно стиля и импорта TabNavigation

Question

Я новичок, чтобы реагировать на родной язык, и я изучаю основы.

При создании моего первого приложения я столкнулся с проблемой. Я запускаю его на своем S9, используя expo

Задача

Я пытаюсь использовать навигационные вкладки, но когда я пытаюсь 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}

По вопросу о стиле, пожалуйста, оставьте свой полный код, чтобы увидеть, что происходит.