Как использовать навигацию.js в App.js в реагировать родной

Question

Я следовал инструкциям https://reactnavigation.org/docs/en/tab-based-navigation.html, чтобы создать навигацию в моем приложении.

Это мой код для файла Navigation.js

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}
class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}
const TabNavigator = createBottomTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});

const TabNav = createAppContainer(TabNavigator);
export default TabNav;

Я хочу импортировать этов моем файле App.js и использовать его в качестве навигации.это мой файл App.js

import React from 'react';
import {Text,View,Button} from 'react-native';

import TabNav from './components/CustomerDashboard/Navigation';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }


    render() {
        return (
            <View>
                <TabNav></TabNav>
            </View>

        );
    }
}

, но это дает мне пустой белый экран.как я могу это исправить?

Answer 1

Вам нужно добавить стиль к вашему View внутри вашего App.js. Если вы дадите ему сгиб в 1, он расширится, чтобы охватить доступное пространство.

Вы также можете закрыть свой TabNav компонент следующим образом:

<TabNav /> вместо использования <TabNav></TabNav>

Вот как я бы обновил ваш App.js

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }


    render() {
        return (
            <View style={{flex: 1}}>
                <TabNav />
            </View>

        );
    }
}