Question

我有以下导航设置

//Main
export const Router = StackNavigator (
    {
        Welcome : { screen : Welcome},
        App: { screen: App }
    },
    {
        initialRouteName : 'Welcome'
    }
);

const App = StackNavigator( 
    {
        page : {screen: Tab}
    }
);

const Tab = TabNavigator( 
    {
        page1 : {screen : page1},
        page2 : {screen : page2},
        page3 : {screen : page3}
    },
    {
        gesturesEnabled: false,
        tabBarPosition: 'bottom',
        animationEnabled: false,
        swipeEnabled: false,
        tabBarComponent: ({navigation}) =>
        <TabBar navigation={navigation}
            iconsMap={{ Explore: 'visibility', Home: 'home', Profile : 'settings' }}/>
    }
);

const page1 = StackNavigator(
    {
       subview1 : {screen :  subview1},
       subview2 : {screen :  subview2}
    }
);

页面显示正常但是当我点击标签上的page1按钮时，我在顶部的视图会反复叠加，例如page1，page1等。

我的设计在这里是错误的还是我可以使用一些选项来限制堆叠视图？

我想要的行为是当我点击底部的page1图标时，视图会发生变化，但如果我点击上方视图中的任何内容，则应该堆叠而不是整个视图

Answer 1

由于您的新修改，我会删除旧内容。

这是我的标签导航器设置：

class Tab3 extends React.Component { // eslint-disable-line react/prefer-stateless-function
  static navigationOptions = {
    tabBarLabel: '3',
    tabBarIcon: ({ tintColor }) => (<Icon name="apps" color={tintColor} />),
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        {renderSomething()}
      </View>
    );
  }
}

const InnerChatNavigator = TabNavigator({
  ['chat/tt1']: { screen: Tab1 },
  ['chat/tt2']: { screen: Tab2 },
  ['chat/tt3']: { screen: Tab3 },
}, {
  headerMode: 'none',
  initialRouteName: 'chat/tt1',
  navigationOptions: {
    // headerStyle: styles.header,
  },
  tabBarOptions: {
    showIcon: true,
    showLabel: false,
    activeTintColor: uiTheme.header.activeTintColor,
    inactiveTintColor: uiTheme.header.inactiveTintColor,
    style: {
      backgroundColor: uiTheme.header.backgroundColor,
    },
  },
  tabBarComponent: TabBarTop,
  tabBarPosition: 'top',
  swipeEnabled: false,
  animationEnabled: false,
  backBehavior: 'none',
});

<Icon/>来自react-native-material-ui和{ TabBarTop } from 'react-navigation';，唯一更大的区别似乎是tabBarComponent？不确定navigation的{{1}}道具是否会导致奇怪的行为。

堆栈浏览器堆叠视图

1 个答案: