反应导航-createBottomTabNavigator不起作用

Question

你好，我正在用expo开发一个React Native应用。以下是我的app.js文件：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createBottomTabNavigator} from 'react-navigation';
import WelcomeScreen from "./screens/WelcomeScreen";
import AuthScreen from "./screens/AuthScreen";

export default class App extends React.Component {
  render() {
    const MainNavigator = createBottomTabNavigator({
       Welcome: WelcomeScreen,
       Auth: AuthScreen
    });

    return (
      <View style={styles.container}>
        <MainNavigator/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

以下是我的package.json文件：

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "dependencies": {
    "expo": "^28.0.0",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
    "react-navigation": "^2.6.2"
  }
}

该应用程序正在运行，没有任何错误，但未显示底部导航选项卡！我也从官方文档中检查了语法，我担心这可能是由于react-navigation版本造成的。 任何帮助将不胜感激。

以下是我的欢迎屏幕组件文件：

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

class WelcomeScreen extends Component{
    render(){
        return(
            <View>
                <Text>
                    Hello this is working!
                </Text>
            </View>
        );
    }
}

export default WelcomeScreen;

auth组件也相同，除了名称更改。

Answer 1

版本不是问题。问题出在自定义StyleSheet和<View/>组件

您可以View the edited app here

如果您想尝试使用应用程序package.json，则为：

{
  "dependencies": {
    "@expo/vector-icons": "6.2.1",
    "react-native-elements": "0.18.5",
    "react-navigation": "^2.6.2"
  }
}

和App.js是：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation'; // Version can be specified in package.json

class AuthScreen extends React.Component{
    render(){
        return(
            <View>
                <Text>
                    AuthScreen Works!
                </Text>
            </View>
        );
    }
}

class WelcomeScreen extends React.Component{
    render(){
        return(
            <View>
                <Text>
                    Hello this is working!
                </Text>
            </View>
        );
    }
}

export default class App extends React.Component {
    render() {
        const MainNavigator = createBottomTabNavigator({
            Auth: { screen: AuthScreen },
            Welcome: { screen: WelcomeScreen },
        });

        // return (
        //     <View style={styles.container}>
        //       <MainNavigator/>
        //     </View>
        // );

        return <MainNavigator/>
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 2

尝试将堆栈导航器作为第一个屏幕，然后尝试将“欢迎”屏幕和“其他”屏幕作为“底部标签导航器”加载，我在许多应用程序中都使用了此结构，请尝试使用https://github.com/davekedar/React-Navigation-V2-Authflow

Answer 3

我通过升级到

解决了这个问题

    <?php
use mp_restaurant_menu\classes\models;
use mp_restaurant_menu\classes\View;

/**
 * @return mixed
 */
function mprm_is_checkout() {
    return models\Checkout::get_instance()->is_checkout();
}

/**
 * @return mixed
 */
function mprm_get_checkout_uri() {
    return models\Checkout::get_instance()->get_checkout_uri();
}

function mprm_get_checkout_cart_template() {
    $data = array();
    $data[ 'is_ajax_disabled' ] = models\Settings::get_instance()->is_ajax_disabled();
    $data[ 'cart_items' ] = models\Cart::get_instance()->get_cart_contents();
    mprm_get_template('shop/checkout-cart', $data);
}

/**
 * @return mixed
 */
function mprm_checkout_button_next() {
    $color = mprm_get_option('checkout_color', 'mprm-btn blue');
    $color = ($color == 'inherit') ? '' : $color;
    $padding = mprm_get_option('checkout_padding', 'mprm-inherit');
    $style = mprm_get_option('button_style', 'button');
    $purchase_page = mprm_get_option('purchase_page', '0');
    ob_start();
    ?>
    <input type="hidden" name="mprm_action" value="gateway_select"/>
    <input type="hidden" name="page_id" value="<?php echo absint($purchase_page); ?>"/>
    <input type="submit" name="gateway_submit" id="mprm_next_button" class="mprm-submit <?php echo $color; ?> <?php echo $padding; ?> <?php echo $style; ?>" value="<?php _e('Next', 'mp-restaurant-menu'); ?>"/>
    <?php
    return apply_filters('mprm_checkout_button_next', ob_get_clean());
}

/**
 * Checkout purchase button
 * @return mixed
 */
function mprm_checkout_button_purchase() {
    $color = mprm_get_option('checkout_color', 'mprm-btn blue');
    $color = ($color == 'inherit') ? '' : $color;
    $style = mprm_get_option('button_style', 'button');
    $label = mprm_get_option('checkout_label', '');
    $padding = mprm_get_option('checkout_padding', 'mprm-inherit');
    if (mprm_get_cart_total()) {
        $complete_purchase = !empty($label) ? $label : __('Purchase', 'mp-restaurant-menu');
    } else {
        $complete_purchase = !empty($label) ? $label : __('Free Menu item', 'mp-restaurant-menu');
    }
    ob_start();
    ?>
    <input type="submit" class="mprm-submit <?php echo $color; ?> <?php echo $padding; ?> <?php echo $style; ?>" id="mprm-purchase-button" name="mprm-purchase" value="<?php echo $complete_purchase; ?>"/>
    <?php
    return apply_filters('mprm_checkout_button_purchase', ob_get_clean());
}

/**
 * @return bool
 */
function mprm_is_no_guest_checkout() {
    return models\Misc::get_instance()->no_guest_checkout();
}

function mprm_checkout_tax_fields() {
    if (models\Taxes::get_instance()->cart_needs_tax_address_fields() && mprm_get_cart_total()) {
        mprm_default_cc_address_fields();
    }
}

function mprm_checkout_submit() { ?>
    <fieldset id="mprm_purchase_submit">
        <?php do_action('mprm_purchase_form_before_submit'); ?>
        <?php mprm_checkout_hidden_fields(); ?>
        <?php echo mprm_checkout_button_purchase(); ?>
        <?php do_action('mprm_purchase_form_after_submit'); ?>
    </fieldset>
    <?php
}

function mprm_checkout_additional_information() {
    View::get_instance()->get_template('/shop/checkout-additional-information');
}

function mprm_checkout_final_total() {
    ?>
    <p id="mprm_final_total_wrap">
        <strong><?php _e('Total:', 'mp-restaurant-menu'); ?></strong>
        <span class="mprm_cart_amount" data-subtotal="<?php echo mprm_get_cart_subtotal(); ?>" data-total="<?php echo mprm_get_cart_subtotal(); ?>"><?php echo mprm_currency_filter(mprm_format_amount(mprm_get_cart_total())); ?></span>
    </p>
    <?php
}

function mprm_checkout_hidden_fields() {
    ?>
    <?php if (is_user_logged_in()) { ?>
        <input type="hidden" name="mprm-user-id" value="<?php echo get_current_user_id(); ?>"/>
    <?php } ?>
    <input type="hidden" name="mprm_action" value="purchase"/>
    <input type="hidden" name="controller" value="cart"/>
    <input type="hidden" name="mprm-gateway" value="<?php echo models\Gateways::get_instance()->get_chosen_gateway(); ?>"/>
    <?php
}

/**
 *  Delivery address default
 */
function mprm_checkout_delivery_address() {
    if (mprm_get_option('shipping_address')): ?>
        <p id="mprm-address-wrap">
            <label for="shipping_address" class="mprm-label">
                <?php _e('Shipping address:', 'mp-restaurant-menu'); ?>
            </label>
            <input type="text" name="shipping_address" value="" class="medium-text" placeholder="<?php _e('Enter your address.', 'mp-restaurant-menu'); ?>"/>
        </p>
    <?php endif;
}

/**
 * Checkout order notes
 */
function mprm_checkout_order_note() {
    ?>
    <p id="mprm-phone-number-wrap">
        <label for="customer_note" class="mprm-label">
            <?php _e('Order notes:', 'mp-restaurant-menu'); ?>
        </label>
        <textarea type="text" name="customer_note" id="customer_note" class="phone-number mprm-input"></textarea>
    </p>
<?php }

/**
 * Summary table
 */

function mprm_checkout_summary_table() { ?>

    <span class="mprm-payment-details-label"><legend><?php _e('Order totals', 'mp-restaurant-menu'); ?></legend></span>
    <table class="mprm-table">
        <?php do_action('mprm_checkout_table_subtotal_before'); ?>
        <tr>
            <td class=""><span><?php _e('Subtotal', 'mp-restaurant-menu'); ?> </span></td>
            <td><span class="mprm_cart_subtotal_amount"><?php echo mprm_currency_filter(mprm_format_amount(mprm_get_cart_subtotal())) ?></span></td>
        </tr>
        <?php do_action('mprm_checkout_table_subtotal_after'); ?>

        <?php do_action('mprm_checkout_table_tax_before'); ?>
        <?php if (mprm_use_taxes()) : ?>
            <tr <?php if (!mprm_is_cart_taxed()) echo ' style="display:none;"'; ?>>
                <td><span><?php _e('Tax', 'mp-restaurant-menu'); ?></span></td>
                <td><span class="mprm_cart_tax_amount" data-tax="<?php echo mprm_get_cart_tax(); ?>"><?php echo mprm_currency_filter(mprm_format_amount(mprm_get_cart_tax())) ?></span></td>
            </tr>
        <?php endif; ?>
        <?php do_action('mprm_checkout_table_tax_after'); ?>

        <?php do_action('mprm_checkout_table_total_before'); ?>
        <tr class="mprm-checkout-total">
            <td>
                <span><b><?php _e('Total', 'mp-restaurant-menu'); ?></b></span>
            </td>
            <td><span class="mprm_cart_amount"><b><?php echo mprm_currency_filter(mprm_format_amount(mprm_get_cart_total())) ?></b></span></td>
        </tr>
        <?php do_action('mprm_checkout_table_total_after'); ?>
    </table>

<?php }

/**
 * Send to success page
 *
 * @param string $query_string
 */
function mprm_send_to_success_page($query_string) {
    return models\Checkout::get_instance()->send_to_success_page($query_string);
}

/**
 * Send back to checkout
 *
 * @param $args
 */
function mprm_send_back_to_checkout($args) {
    return models\Checkout::get_instance()->send_back_to_checkout($args);
}

Answer 4

今天遇到"react-navigation": "^4.3.9"。

通过设置<View style={{ flex: 1 }}>而不是仅设置<View>来解决。如果将导航器包装在<View>以外的其他内容（即<Fragment>）中，则不会发生此问题。

https://github.com/react-navigation/react-navigation/issues/8449

https://reactnavigation.org/docs/troubleshooting/#nothing-is-visible-on-the-screen-after-adding-a-view