React Native首页添加Bottom Navigation后应用冻结问题求助

问题描述 #

在React Native项目的首页（Dashboard组件）中添加Bottom Navigation组件后，打开首页时应用出现冻结现象，无任何错误提示；移除Bottom Navigation相关代码后，首页可正常运行。

问题根源 #

核心问题是无限递归渲染：

• Dashboard组件内部渲染了NavigationContainer和Tab.Navigator
• 而Tab.Navigator又将Dashboard本身作为Home页面的组件
• 这会导致Dashboard渲染时创建底部导航，底部导航又会渲染Dashboard，循环往复直到应用资源耗尽卡死

修复方案 #

方案1：将底部导航作为应用根导航（推荐） #

如果底部导航是整个应用的核心导航结构，应该把它放在应用的入口文件（比如App.js）中，而不是嵌套在Dashboard内部。

示例代码：

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import Dashboard from './path/to/Dashboard';
import TicketsScreen from './path/to/TicketsScreen';
import MembershipScreen from './path/to/MembershipScreen';
import HelpScreen from './path/to/HelpScreen';
import ProfileScreen from './path/to/ProfileScreen';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          tabBarStyle: { backgroundColor: '#129990' },
          tabBarShowLabel: false,
          tabStyle: { paddingTop: 6, paddingBottom: 6 },
          tabBarInactiveTintColor: '#71CAC4',
          tabBarActiveTintColor: '#ffffff',
        }}
      >
        <Tab.Screen
          name="Home"
          component={Dashboard}
          options={{
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="view-dashboard" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Tickets"
          component={TicketsScreen}
          options={{
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="ticket" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Membership"
          component={MembershipScreen}
          options={{
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="card-account-details" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Help"
          component={HelpScreen}
          options={{
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="help-circle" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="account" color={color} size={size} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

修改Dashboard组件，移除内部的导航容器和导航器，只保留首页内容：

// Dashboard.js
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Modal, Dimensions, Image, TextInput, StyleSheet, ScrollView } from 'react-native';
import Swiper from 'react-native-swiper';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const { width, height } = Dimensions.get('window');

const Dashboard = ({ navigation }) => {
  const [popupVisible, setPopupVisible] = useState(false);
  const [selectedOption, setSelectedOption] = useState(false);

  const openPopup = () => setPopupVisible(true);
  const closePopup = () => setPopupVisible(false);

  const selectOption = (option) => {
    setSelectedOption(option);
    closePopup();
  };

  const screenWidth = Dimensions.get('window').width;
  const fontSize = screenWidth < 600 ? 16 : 24;

  const slides = [
    {
      key: '1',
      image: require('../assets/Slider/Home-Slider.jpg'),
      header: 'The Jane Hotel Ballroom 1',
      description: 'This century-old West Village landmark, built in 1908 as a sailors lodging, lies on the edge of the Meatpacking.',
    },
    {
      key: '2',
      image: require('../assets/Slider/Home-Slider.jpg'),
      header: 'The Jane Hotel Ballroom 2',
      description: 'This century-old West Village landmark, built in 1908 as a sailors lodging, lies on the edge of the Meatpacking.',
    }
  ];

  return (
    <View style={{ flex: 1 }}>
      <ScrollView>
        <View style={styles.container}>
          {/* 保留原首页所有UI代码 */}
          <View style={styles.headerContainer}>
            <View style={styles.headerModalContainer}>
              <TouchableOpacity onPress={openPopup}>
                <Text style={styles.headerModalSelectedOption}>
                  {selectedOption || 'City 1'}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.MessagesContainer}>
                <MaterialCommunityIcons name='email' size={25} color="#ffffff" style={styles.MessagesIcon} />
              </TouchableOpacity>

              <Modal
                transparent={true}
                animationType='slide'
                visible={popupVisible}
                onRequestClose={closePopup}
              >
                <TouchableOpacity
                  style={styles.ModalView}
                  onPress={closePopup}
                >
                  <View style={styles.ModalContainer}>
                    <Text style={styles.ModalTextView}>
                      Selected City: <Text style={styles.ModalSelectedOption}>{selectedOption || 'City 1'}</Text>
                    </Text>
                    <TouchableOpacity onPress={() => selectOption('City 1')}>
                      <Text style={styles.ModalOptions}>City 1</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => selectOption('City 2')}>
                      <Text style={styles.ModalOptions}>City 2</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => selectOption('City 3')}>
                      <Text style={styles.ModalOptions}>City 3</Text>
                    </TouchableOpacity>
                  </View>
                </TouchableOpacity>
              </Modal>
            </View>
          </View>

          {/* 省略原首页其他UI代码 */}
        </View>
      </ScrollView>
    </View>
  );
};

// 保留原样式代码
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 16,
  },
  headerContainer: {
    backgroundColor: '#129990',
    paddingVertical: 12,
    paddingHorizontal: 16,
    marginHorizontal: -16,
    marginBottom: 16,
  },
  headerModalContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  headerModalSelectedOption: {
    color: '#ffffff',
    fontSize: 18,
  },
  MessagesContainer: {
    padding: 8,
  },
  ModalView: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  ModalContainer: {
    backgroundColor: '#ffffff',
    padding: 24,
    borderRadius: 8,
    width: '80%',
  },
  ModalTextView: {
    fontSize: 16,
    marginBottom: 16,
  },
  ModalSelectedOption: {
    fontWeight: 'bold',
  },
  ModalOptions: {
    fontSize: 16,
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  // 省略其他样式
});

export default Dashboard;

方案2：自定义底部导航栏（仅作为页面内操作栏） #

如果不需要底部导航作为页面跳转导航器，只是想在Dashboard底部加一个操作栏，可以自定义View组件手动处理跳转：

// Dashboard.js中替换原底部导航部分
<View style={styles.bottomNavBar}>
  <TouchableOpacity onPress={() => navigation.navigate('Dashboard')} style={styles.navItem}>
    <MaterialCommunityIcons name="view-dashboard" color="#ffffff" size={25} />
  </TouchableOpacity>
  <TouchableOpacity onPress={() => navigation.navigate('Tickets')} style={styles.navItem}>
    <MaterialCommunityIcons name="ticket" color="#71CAC4" size={25} />
  </TouchableOpacity>
  <TouchableOpacity onPress={() => navigation.navigate('Membership')} style={styles.navItem}>
    <MaterialCommunityIcons name="card-account-details" color="#71CAC4" size={25} />
  </TouchableOpacity>
  <TouchableOpacity onPress={() => navigation.navigate('Help')} style={styles.navItem}>
    <MaterialCommunityIcons name="help-circle" color="#71CAC4" size={25} />
  </TouchableOpacity>
  <TouchableOpacity onPress={() => navigation.navigate('Profile')} style={styles.navItem}>
    <MaterialCommunityIcons name="account" color="#71CAC4" size={25} />
  </TouchableOpacity>
</View>

添加对应样式：

const styles = StyleSheet.create({
  // ... 原有样式 ...
  bottomNavBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#129990',
    paddingVertical: 6,
    borderTopWidth: 0,
  },
  navItem: {
    alignItems: 'center',
  }
});

关键注意点 #

• 禁止在组件内部渲染以自身为子组件的导航器，会触发无限递归
• NavigationContainer通常只在应用根层级出现一次，independent={true}仅用于特殊独立导航场景，不适合常规底部导航
• 底部导航作为应用核心导航时，必须放在根层级，确保每个页面都是导航器的子组件，而非嵌套在某个页面内部

内容的提问来源于stack exchange，提问作者Lauren