当我尝试打开主屏幕时，应用程序冻结- React Native

t3irkdon  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(114)

在主屏幕上，我添加了底部导航。添加后，当我尝试打开主屏幕时，应用程序冻结，它不显示任何错误。当我删除底部导航时，主屏幕正常工作。主屏幕的代码是：

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';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

import TicketsScreen from './tickets/tickets';
import MembershipScreen from './membership/membership';
import HelpScreen from './help/help';
import ProfileScreen from './profile/profile';

// Create a bottom tab navigator
const Tab = createBottomTabNavigator();

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}>

          <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 2')}>
                      <Text style={styles.ModalOptions}>City 3</Text>
                    </TouchableOpacity>
                  </View>
                </TouchableOpacity>
              </Modal>

            </View>
          </View>

          <View style={styles.SearchBoxContainer}>
            <TouchableOpacity>
              <View style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: '#129990', padding: 10, borderRadius: 5 }}>
                <MaterialCommunityIcons name='magnify' size={20} color='#ffffff' />
                <TextInput
                  placeholder='Search events, venues, facilities'
                  style={{ marginLeft: 10, flex: 1, color: '#A0A0A0' }}
                  placeholderTextColor="#fff"
                />
              </View>
            </TouchableOpacity>

          </View>

          <View style={styles.FeaturedFacilities}>
            <View style={styles.FeaturedFacilitiesHeader}>
              <Text style={styles.FeaturedFacilitiesText}>Featured facilities</Text>
            </View>
          </View>

          <View style={styles.SlidersContainer}>
            <Swiper showsButtons={false} showsPagination={false}>
              {slides.map((slide) => (
                <View key={slide.key} style={styles.SliderContainer}>
                  <Image source={slide.image} style={styles.SliderImage} resizeMode="cover" />
                  <View style={styles.overlay} />
                  <Text style={styles.SliderHeader}>{slide.header}</Text>
                  <Text style={styles.SliderDescription}>{slide.description}</Text>
                </View>
              ))}
            </Swiper>
          </View>

          <View style={styles.UpcomingEventsContainer}>
            <View style={styles.UpcomingEventsHeader}>
              <Text style={styles.UpcomingEventsText}>Upcoming Events</Text>
              <Text style={styles.UpcomingEventsSeeAll} onPress={() => navigation.navigate('UpCommingEvents')}>See all</Text>
            </View>
          </View>

          <View style={styles.UpomingEventsCubesContainer}>
            <View style={styles.UpcomingEventCubeContainer}>
              <View style={styles.UpcomingEventBox}>
                <Image
                  source={require('../assets/UpcomingEvents/Object-1.jpg')}
                  style={styles.UpcomingEventImage}
                  resizeMode="cover"
                />
                <View style={styles.UpcomingEventContent}>
                  <Text style={styles.UpcomingEventHeader}>Nightless Wednesday</Text>
                  <Text style={styles.UpcomingEventDescription}>6/15 at Club Solterios</Text>
                </View>
              </View>

              <View style={styles.UpcomingEventBox}>
                <Image
                  source={require('../assets/UpcomingEvents/Object-2.jpg')}
                  style={styles.UpcomingEventImage}
                  resizeMode="cover"
                />
                <View style={styles.UpcomingEventContent}>
                  <Text style={styles.UpcomingEventHeader}>Thursday Night</Text>
                  <Text style={styles.UpcomingEventDescription}>6/18 at Student Club</Text>
                </View>
              </View>
            </View>
          </View>

          <View style={styles.JustForYouContainer}>
            <View style={styles.UpcomingEventsHeader}>
              <Text style={styles.UpcomingEventsText}>Just For You</Text>
              <Text style={styles.UpcomingEventsSeeAll} onPress={() => navigation.navigate('UpCommingEvents')}>See all</Text>
            </View>
          </View>

          <View style={styles.JustForYouCubesContainer}>
            <View style={styles.UpcomingEventCubeContainer}>
              <View style={styles.UpcomingEventBox}>
                <Image
                  source={require('../assets/UpcomingEvents/Object-1.jpg')}
                  style={styles.UpcomingEventImage}
                  resizeMode="cover"
                />
                <View style={styles.UpcomingEventContent}>
                  <Text style={styles.UpcomingEventHeader}>Nightless Wednesday</Text>
                  <Text style={styles.UpcomingEventDescription}>6/15 at Club Solterios</Text>
                </View>
              </View>

              <View style={styles.UpcomingEventBox}>
                <Image
                  source={require('../assets/UpcomingEvents/Object-2.jpg')}
                  style={styles.UpcomingEventImage}
                  resizeMode="cover"
                />
                <View style={styles.UpcomingEventContent}>
                  <Text style={styles.UpcomingEventHeader}>Thursday Night</Text>
                  <Text style={styles.UpcomingEventDescription}>6/18 at Student Club</Text>
                </View>
              </View>
            </View>
          </View>

          <View style={styles.FacilitiesContainer}>
            <View style={styles.UpcomingEventsHeader}>
              <Text style={styles.UpcomingEventsText}>Facilities</Text>
              <Text style={styles.UpcomingEventsSeeAll} onPress={() => navigation.navigate('UpCommingEvents')}>See all</Text>
            </View>
          </View>

          <View style={styles.FacilitiesCubesContainer}>
            <View style={styles.UpcomingEventCubeContainer}>
              <View style={styles.UpcomingEventBox}>
                <Image
                  source={require('../assets/UpcomingEvents/Object-3.jpg')}
                  style={styles.UpcomingEventImage}
                  resizeMode="cover"
                />
                <View style={styles.UpcomingEventContent}>
                  <Text style={styles.UpcomingEventHeader}>Nightless Wednesday</Text>
                  <Text style={styles.UpcomingEventDescription}>6/15 at Club Solterios</Text>
                </View>
              </View>

              <View style={styles.UpcomingEventBox}>
                <Image
                  source={require('../assets/UpcomingEvents/Object-4.jpg')}
                  style={styles.UpcomingEventImage}
                  resizeMode="cover"
                />
                <View style={styles.UpcomingEventContent}>
                  <Text style={styles.UpcomingEventHeader}>Thursday Night</Text>
                  <Text style={styles.UpcomingEventDescription}>6/18 at Student Club</Text>
                </View>
              </View>
            </View>
          </View>

        </View>

      </ScrollView>

      <View style={styles.container22}>
        <NavigationContainer independent={true}>
          <Tab.Navigator
            screenOptions={{
              tabBarStyle: {
                backgroundColor: '#129990',
              },
              style: {
                borderTopWidth: 0, // Hide top border
              },
              tabBarShowLabel: false,
              paddingTop: 6,
              paddingBottom: 6,
            },
              labelStyle: {
            display: 'none', // Hide labels
                            },
          activeTintColor: '#fff',
          tabBarInactiveTintColor: '#71CAC4',
          tabBarActiveTintColor: '#ffffff',
                        }}
                    >
          <Tab.Screen
            name="Home"
            component={Dashboard}
            options={{
              tabBarIcon: ({ color, size }) => (
                <TouchableOpacity onPress={() => navigation.navigate('Dashboard')}>
                  <MaterialCommunityIcons name="Dashboard" color={color} size={size} />
                </TouchableOpacity>
              ),
            }}
          />
          <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 }) => (
                <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
                  <MaterialCommunityIcons name="account" color={color} size={size} />
                </TouchableOpacity>
              ),
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </View>
    </View >
    );
};

字符串
当我删除这部分代码时，一切都很好。

<NavigationContainer independent={true}>
  <Tab.Navigator
    screenOptions={{
      tabBarStyle: {
        backgroundColor: '#129990',
      },
      style: {
        borderTopWidth: 0, // Hide top border
      },
      tabBarShowLabel: false, // Brisanje labela ispod ikonica
      tabStyle: {
        paddingTop: 6,
        paddingBottom: 6,
      },
      labelStyle: {
        display: 'none', // Hide labels
      },
      activeTintColor: '#fff',
      tabBarInactiveTintColor: '#71CAC4',
      tabBarActiveTintColor: '#ffffff',
    }}
  >
    <Tab.Screen
      name="Home"
      component={Dashboard}
      options={{
        tabBarIcon: ({ color, size }) => (
          <TouchableOpacity onPress={() => navigation.navigate('Dashboard')}>
            <MaterialCommunityIcons name="Dashboard" color={color} size={size} />
          </TouchableOpacity>
        ),
      }}
    />
    <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 }) => (
          <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
            <MaterialCommunityIcons name="account" color={color} size={size} />
          </TouchableOpacity>
        ),
      }}
    />
  </Tab.Navigator>
</NavigationContainer>

型

react-native

1条答案

按热度按时间
tkqqtvp1

tkqqtvp11#

React组件的循环存在于Dashboard组件中。您将标签导航器放在Dashboard中，标签导航器也使用Dashboard。React Native无法处理这种导航器组件循环，因此屏幕将冻结。
解决方案很简单，删除 Jmeter 板组件中的标签导航器，只需将标签导航器作为另一个组件取出。

创建navigator.js

import Dashboard from './dashboard';
//...Rest of the import statement

export default function Navigator() {
  return(
    <NavigationContainer>
     <Tab.Navigator
       screenOptions={{
        tabBarStyle: {
        backgroundColor: '#129990',
       },
       style: {
        borderTopWidth: 0, // Hide top border
       },
       tabBarShowLabel: false, // Brisanje labela ispod ikonica
       tabStyle: {
        paddingTop: 6,
        paddingBottom: 6,
       },
       labelStyle: {
        display: 'none', // Hide labels
       },
       activeTintColor: '#fff',
       tabBarInactiveTintColor: '#71CAC4',
       tabBarActiveTintColor: '#ffffff',
     }}
   >
     <Tab.Screen
       name="Home"
       component={Dashboard}  //Here is where the loop happens in question
       options={{
         tabBarIcon: ({ color, size }) => (
           <TouchableOpacity onPress={() => navigation.navigate('Dashboard')}>
             <MaterialCommunityIcons name="Dashboard" color={color} size={size} />
           </TouchableOpacity>
         ),
       }}
     />
     //{...Rest of your screens}}
   </Tab.Navigator>
  </NavigationContainer>
 )
}

字符串
你可以阅读React Navigation文档来了解更多关于标签导航器的细节。

赞(0）分享  回复(0）举报  2023-11-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com