React Native - 嵌套导航器时反应导航缓慢转换 [英] React Native - React Navigation slow transitions when nesting navigators

问题描述

我正在使用 react-native 构建跨平台本机应用程序，并使用 react-navigation 在屏幕之间导航和使用 redux 管理导航状态.当我嵌套导航器时会出现问题.

I am building a cross-platform native application using react-native and using react-navigation for navigating to and from screens and managing navigation state using redux. The problem arises when I am nesting my navigators.

例如，我使用 Stack Navigator 作为我的应用程序的默认导航器.

For example, I am using Stack Navigator as the default navigator for my app.

export const DefaultNavigate = new StackNavigator(
{
        Login: {
            screen: LoginScreen,
        },
        Home: {
            screen: AppDrawerNavigate,
        },
        AppTabNav: {
            screen: AppTabNavigator,
        },
    }
);

我的第一个屏幕是登录屏幕，主屏幕是抽屉导航器.

where my first screen is loginscreen and home screen is a drawer navigator.

const AppDrawerNavigate = new DrawerNavigator(
{
        InProcess: {
             screen: InProcess,
        },
        Machine: {
             screen: Machine
        },
        Settings: {
             screen: Settings
        },
        Logout: {
             screen: Logout
        },
        ContactUs: {
             screen: ContactUs
        }
    }
);

当用户单击抽屉导航器中的机器时，我将屏幕导航到 DefaultNavigator 中声明的 AppTabNav.

When the user clicks on the Machine in the Drawer Navigator I am navigating the screen to AppTabNav declared in DefaultNavigator.

const AppTabNavigator = new TabNavigator(
    {
        MachineList: {
            screen: MachineList,
        },
        CalendarView: {
            screen: CalendarView,
        }
    },
);

这是一个标签导航器，有两个屏幕，顾名思义，一个是使用 listview 来显示列表，另一个是使用 calendarview 来显示日历.我的列表视图数据源中只有大约 30-40 个项目，因此渲染它们对于列表视图来说是小菜一碟.但是当从 DrawerNavigator 从任何屏幕导航到机器屏幕时，会有 1-2 秒的延迟，并且 js 线程下降到 -2.1，这确实减慢了过渡.

which is a tab navigator with two screens as the name suggests one is using listview to display list and the other is using the calendarview to display calendar. There are around only 30-40 items in my dataSource of listview so rendering them is a piece of cake for listview. But when there is navigation from any screen to Machine screen from DrawerNavigator there is lag of 1-2sec and js thread drops to -2.1 which is really slowing down the transition.

如果有人需要抽屉导航器中机器屏幕的代码，这里是，

and if someone need the code for Machine screen in drawer navigator here it is,

componentDidMount() {
    if(this.state.loaded)
        this.props.navigation.dispatch({ type: MACHINE});
}
render() {
    return <AppActivityIndicator />
}

以下是我处理屏幕导航的reducer代码，

the following is my reducer code which is handling navigation of the screen,

case types.MACHINE:
  nextState = DefaultNavigate.router.getStateForAction(
    NavigationActions.reset({
      index: 1,
      actions: [
        NavigationActions.navigate({ routeName: 'Home' }),
        NavigationActions.navigate({ routeName: 'AppTabNav' })
      ]
    }),
    state
  );

以下是抽屉导航器中MachineList画面的render方法，

the following is the render method of MachineList screen in drawer navigator,

render() {
    return (
        <View style={styles.container}>
            <AppStatusBar />
            <ListView
                initialListSize={10}
                dataSource={this.state.dataSource}
                renderRow={this.renderRow.bind(this)}
                enableEmptySections={true}
            />
        </View>
    );
}

请帮我解决这个问题.我做错了什么?

Please help me out of this one. What am I doing wrong?

依赖

"dependencies": {
    "native-base": "^2.3.1",
    "react": "16.0.0-alpha.12",
    "react-devtools": "^2.5.0",
    "react-native": "0.47.1",
    "react-native-calendars": "^1.5.8",
    "react-native-vector-icons": "^4.3.0",
    "react-navigation": "^1.0.0-beta.11",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-persist": "^4.9.1",
    "redux-thunk": "^2.2.0"
},
"devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "3.0.0",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.12"
},

推荐答案

我遇到了同样的问题.切换屏幕时出现明显延迟.我发现这个非常有用的博客 https://novemberfive.co/blog/react-performance-导航动画/

I was facing the same issue. There was a substantial delay while switching the screen. I found this very useful blog https://novemberfive.co/blog/react-performance-navigation-animations/

所以问题是

当一个新的屏幕被推送时，React Navigation 最初会在屏幕外渲染它，然后将其动画化到位.这意味着当一个包含大量组件的复杂屏幕被推送时，很容易需要几百毫秒来渲染

When a new screen is pushed, React Navigation will initially render it off-screen and animate it into place afterward. This means that when a complex screen with lots of components that easily takes a few hundred milliseconds to render is pushed

为了解决这个问题，我使用了 InteractionManager.一旦所有动画完成，它基本上会给你回调.

To fix this, I used InteractionManager. It basically gives you the callback once all the animation has been completed.

以下是我为避免延迟和修复后应用程序运行良好而采取的措施.希望这会有所帮助.

Following is what I have done to avoid delay and app was working fine after the fix. Hope this helps.

// @flow

import React, { Component } from 'react';
import { InteractionManager, ActivityIndicator} from 'react-native';

class Team extends Component<Props> {
 state = {
    isReady : false
 }
 componentDidMount() {
   // 1: Component is mounted off-screen
   InteractionManager.runAfterInteractions(() => {
     // 2: Component is done animating
     // 3: Start fetching the team / or render the view
    // this.props.dispatchTeamFetchStart();
     this.setState({
       isReady: true
     })
   });
 }

 // Render
 render() {
  if(!this.state.isReady){
  return <ActivityIndicator />
  }
  return(
   //  Render the complex views
   )
   ...
 }
}

export default Team;

这篇关于React Native - 嵌套导航器时反应导航缓慢转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！