如何使堆栈导航具有性能

Question

我在Android上的应用程序中使用react导航v4，并且我在应用程序中有堆栈、底部和顶部选项卡导航。该应用程序的运行速度约为每秒40多帧，当我浏览底部选项卡和顶部选项卡时，速度降至每秒10帧左右。当我尝试导航到堆栈中的另一个屏幕时，它会降至-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,
navigationOptions: {
headerShown: false,
},
},
});
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, View, Text, 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>
);
};

Answer 1

我在v4中尝试了一些类似的抽屉。在我的index.js(应用程序组件(中使用useScreens((来解决这一点，将其放在文件的顶部(而不是组件内部(。

我在我的遗留应用程序中使用的v4版本是"；react native screens"："1.0.0-；

import { useScreens } from 'react-native-screens';
useScreens();

同样在v5中，我没有在没有react原生屏幕(drop-fps(的情况下尝试任何导航问题。因此，如果这是一个选项，你可以迁移它。