javascript – 导航实验是卸载选项卡

我在使用复合实验导航(CardStack Tabs)和缩减状态管理的反应本机应用程序.我能够创建基于Tab的导航,但我现在面临的问题是当我在组件被卸载的选项卡之间切换并且每次重新渲染时.

问题

让我说我滚动了几个帖子,当我改变Tab它将从顶部开始. (解决方法可能是在redux状态下存储滚动位置).

以下是我用于导航Tabbed Experimental Navigation的示例代码

解决方法

你必须改变TabBar的方法.

基本上你想要Navigator每个Tab,所以你可以有每个Tab和一个导航器包含Tabs(TabBar)的路由栈.您还要为TabBar设置初始路由堆栈,并在这些路由之间跳转.

了解Navigator方法之间的区别很重要.

>当您弹出路线时,它将被卸载,并将活动索引移动到
最后一个.因为最后一个被保持在状态,它将被恢复
以前渲染(很有可能会改变道具).再次到弹出的路线将完全恢复场景(这发生在你身上).
>当你推路由时,没有任何东西被卸载,新路由被挂载.
>当你跳转ToIndex路由时,再次没有挂载,所以跳
路线之间恢复场景(再次,如果道具改变了)
场景将重现).

所以,我不认为这是正确的：

I was able to create Tab based Navigation but the issue that i am facing Now is when i switch between tabs the component is unmounted and it re-render every time.

…您卸载导航操作错误的路线.

现在还有什么不同,NavigationCardStack并没有实际创建它自己的状态,它是从外部传递的,这给了你很大的灵活性.还有一件好事是,您可以使用Facebook提供的reducer进行常见操作(例如push,pop,jumpToIndex;它们是Navigation Utils的一部分).

你有完整的例子,说明如何创建navigationState和它的reducers here,所以我不会解释,只是给出想法如何解决你的问题.

[更新]示例现在工作！

import React from 'react';
import { NavigationExperimental,View,Text,StyleSheet } from 'react-native';

const {
  CardStack: NavigationCardStack,StateUtils: NavigationStateUtils,} = NavigationExperimental;

const style = StyleSheet.create({
  screen: {
    flex: 1,},screenTitle: {
    marginTop: 50,fontSize: 18,pushNewScreenLabel: {
    marginVertical: 10,fontSize: 15,fontWeight: "bold",goBackLabel: {
    fontSize: 15,tabBarWrapper: {
    position: 'absolute',height: 50,bottom: 0,left: 0,right: 0,top: null,backgroundColor: 'grey',flexDirection: 'row',flex: 0,alignItems: 'stretch',tabBarItem: {
    flex: 1,justifyContent: 'center',backgroundColor: 'red',});

export class TabBar extends React.Component {
  constructor(props,context) {
    super(props,context);

    this.jumpToTab = this.jumpToTab.bind(this);

    // Create state
    this.state = {
      navigationState: {
        // Active route,will  be rendered as default
        index: 0,// "tab-s" represents route objects
        routes: [
          { name: 'Tab1',key: '1' },{ name: 'Tab2',key: '2' },{ name: 'Tab3',key: '3' },{ name: 'Tab4',key: '4' }],};
  }

  jumpToTab(tabIndex) {
    const navigationState = NavigationStateUtils.jumpToIndex(this.state.navigationState,tabIndex);
    this.setState({ navigationState });
  }

  renderScene({ scene }) {
    return <Tab tab={scene.route} />;
  }

  render() {
    const { navigationState } = this.state;
    return (
      <View style={style.screen}>
        <NavigationCardStack
          onNavigate={() => {}}
          navigationState={navigationState}
          renderScene={this.renderScene}
        />
        <View style={style.tabBarWrapper}>
          {navigationState.routes.map((route,index) => (
            <TabBarItem
              key={index}
              onPress={this.jumpToTab}
              title={route.name}
              index={index}
            />
            ))}
        </View>
      </View>
    );
  }
}

class TabBarItem extends React.Component {
  static propTypes = {
    title: React.PropTypes.string,onPress: React.PropTypes.func,index: React.PropTypes.number,}

  constructor(props,context);
    this.onPress = this.onPress.bind(this);
  }
  onPress() {
    this.props.onPress(this.props.index);
  }
  render() {
    return (
      <Text style={style.tabBarItem} onPress={this.onPress}>
        {this.props.title}
      </Text>);
  }
}

class Tab extends React.Component {
  static propTypes = {
    tab: React.PropTypes.object,context);
    this.goBack = this.goBack.bind(this);
    this.pushRoute = this.pushRoute.bind(this);
    this.renderScene = this.renderScene.bind(this);
    this.state = {
      navigationState: {
        index: 0,routes: [{ key: '0' }],};
  }

  // As in TabBar use NavigationUtils for this 2 methods
  goBack() {
    const navigationState = NavigationStateUtils.pop(this.state.navigationState);
    this.setState({ navigationState });
  }

  pushRoute(route) {
    const navigationState = NavigationStateUtils.push(this.state.navigationState,route);
    this.setState({ navigationState });
  }

  renderScene({ scene }) {
    return (
      <Screen
        goBack={this.goBack}
        goTo={this.pushRoute}
        tab={this.props.tab}
        screenKey={scene.route.key}
      />
    );
  }

  render() {
    return (
      <NavigationCardStack
        onNavigate={() => {}}
        navigationState={this.state.navigationState}
        renderScene={this.renderScene}
      />
    );
  }
}

class Screen extends React.Component {
  static propTypes = {
    goTo: React.PropTypes.func,goBack: React.PropTypes.func,screenKey: React.PropTypes.string,tab: React.PropTypes.object,context);
    this.nextScreen = this.nextScreen.bind(this);
  }

  nextScreen() {
    const { goTo,screenKey } = this.props;
    goTo({ key: `${parseInt(screenKey) + 1}` });
  }

  render() {
    const { tab,goBack,screenKey } = this.props;
    return (
      <View style={style.screen}>
        <Text style={style.screenTitle}>
          {`Tab ${tab.key} - Screen ${screenKey}`}
        </Text>
        <Text style={style.pushNewScreenLabel} onPress={this.nextScreen}>
          Push Screen into this Tab
        </Text>
        <Text style={style.goBackLabel} onPress={goBack}>
          Go back
        </Text>
      </View>
    );
  }
}

## TBD多一点清理..

原文地址：https://www.jb51.cc/js/151809.html