如何使我的堆栈导航性能更好？

问题描述

我正在Android上的应用程序中使用react-navigation v4，并且在应用程序中同时具有堆栈，底部和顶部标签导航。该应用程序的运行速度约为40+ fps，在浏览底部和顶部标签时会下降至10 fps。当我尝试导航到堆栈中的其他屏幕时，它下降到-2.5fps，并且需要几秒钟才能打开新屏幕。我已经使用

在网上阅读了一两本书

'''
import {enableScreen} from 'react-native-screens'
'''

我看这对您有所帮助，但性能仍然很差。关于如何解决我的问题有什么想法吗？

以下是我在App.js文件中的代码的预览：

    import React from "react";
import {
  StyleSheet,Text,View,Button,Dimensions,StatusBar,} from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { MaterialIcons,FontAwesome } from "react-native-vector-icons";

import HomeScreen from "./Screens/HomeScreen";
import Search from "./Screens/SearchScreen";
import Library from "./Screens/LibraryScreen";
import Colors from "./Components/Colors";
import { DEVICE_HEIGHT,DEVICE_WIDTH } from "./Components/Device_Dimension";
import KelenchaDetails from "./Screens/KelenchaDetails";

const HomeScreenStack = createStackNavigator({
  Home: {
    screen: HomeScreen,navigationOptions: {
      headerShown: false,},params: {
      colors: [
        Colors.albumCard1,Colors.albumCard2,Colors.albumCard3,Colors.albumCard4,],Kelencha: {
    screen: KelenchaDetails,});

const KelenchsDetailsContainer = createAppContainer(HomeScreenStack);

const DefaultHomeScreeen = createMaterialBottomTabNavigator(
  {
    HomeScreen: {
      screen: KelenchsDetailsContainer,navigationOptions: {
        tabBarLabel: "Home",SearchScreen: {
      screen: Search,navigationOptions: {
        tabBarIcon: () => (
          <FontAwesome name="search" size={25} color={Colors.albumCard2} />
        ),tabBarLabel: "Search",LibraryScreen: {
      screen: Library,navigationOptions: {
        tabBarIcon: () => (
          <MaterialIcons
            name="library-music"
            size={25}
            color={Colors.albumCard2}
          />
        ),tabBarLabel: "Library",{
    inactiveColor: Colors.secondaryBackground,activeColor: Colors.lightCardText,barStyle: {
      backgroundColor: Colors.primaryBackground,overflow: "hidden",height: DEVICE_HEIGHT * 0.1,borderTopRightRadius: DEVICE_WIDTH * 0.1,borderTopLeftRadius: DEVICE_WIDTH * 0.1,}
);

const AppContent = createAppContainer(DefaultHomeScreeen);

export default function App() {
  return (
    <View style={styles.container}>
      <AppContent />
      <StatusBar barStyle="light-content" />
    </View>
  );
}

这是我的主屏幕中的代码：

 import React from "react";
import { StyleSheet,FlatList } from "react-native";

import { createMaterialTopTabNavigator } from "react-navigation-tabs";
import { createAppContainer } from "react-navigation";

import Colors from "../Components/Colors";
import AlbumCard from "../Components/HomeScreen/AlbumCard";
import { DEVICE_HEIGHT,DEVICE_WIDTH } from "../Components/Device_Dimension";
import { ALBUMS } from "../Components/HomeScreen/Albumns";
import DetailCard from "../Components/HomeScreen/DetailCard";

const CARD_WIDTH = DEVICE_WIDTH * 0.32;

const TrialComp = () => {
  return (
    <View style={{ flex: 1,alignItems: "center" }}>
      <DetailCard />
      <DetailCard />
      <DetailCard />
    </View>
  );
};

const DetialsNav = createMaterialTopTabNavigator(
  {
    Recent: {
      screen: TrialComp,navigationOptions: {},Composers: {
      screen: TrialComp,Choirs: {
      screen: TrialComp,{
    tabBarOptions: {
      labelStyle: {
        color: "#212423",fontSize: 14,tabStyle: {
        width: DEVICE_WIDTH * 0.33,indicatorStyle: {
        width: DEVICE_WIDTH * 0.023,height: DEVICE_HEIGHT * 0.013,borderRadius: DEVICE_WIDTH * 0.023 * 0.6,marginHorizontal: DEVICE_WIDTH * 0.33 * 0.42,backgroundColor: Colors.albumCard2,style: {
        backgroundColor: Colors.secondaryBackground,}
);

const Detail = createAppContainer(DetialsNav);

const HomeScreen = (props) => {
  let {
    albumCardsContainer,albumSection,scrollableDetailSection,homeScreenContainer,homeScreenTextHeader,headerText,} = styles;
  return (
    <View style={homeScreenContainer}>
      <View style={albumSection}>
        <View style={homeScreenTextHeader}>
          <Text style={headerText}>Try Some</Text>
        </View>
        <View style={albumCardsContainer}>
          <FlatList
            data={ALBUMS}
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item,index) => index.toString()}
            horizontal={true}
            renderItem={(album) => (
              <AlbumCard
                navigation={props.navigation}
                source={album.item.source}
                albumTitle={album.item.title}
                theme={album.item.theme}
                textColor={album.item.textColor}
              />
            )}
          />
        </View>
      </View>
      <View style={scrollableDetailSection}>
        <Detail />
      </View>
    </View>
  );
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）