Question

我正在使用本机应用程序进行本机导航。我必须将TabNavigators放在StackNavigator中才能使用内置的标头功能。见下文。

app.js

const FeedScreenStack = createStackNavigator({
  Feed: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  }
});

const ProfileScreenStack = createStackNavigator({
  Feed: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

feed.js：

import React from 'react';
import { View } from 'react-native';

class feed extends React.Component {
    constructor(props) {
        super(props);
    }

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

export default feed;

单击profile时，该应用程序可以移至个人资料屏幕。但是单击feed时，它不会移到Feed屏幕。没有警告或错误，当我单击提要时，该应用程序完全不响应。我在做什么错了？

Answer 1

问题是您在很多地方都定义了重复的路由名称，请尝试使用不同的名称

这样做

const FeedScreenStack = createStackNavigator({
  FeedStack: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  }
});

const ProfileScreenStack = createStackNavigator({
  ProfileStack: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

StackNavigator中的本机TabNavigator，无法在屏幕之间移动

1 个答案: