javascript - React Native 的堆栈导航器和选项卡导航器出现问题

Question

我正在尝试从选项卡导航器导航到堆栈导航器上的屏幕，但收到此错误:

在选项卡导航器中后是否有特定的方法可以导航回堆栈导航器？

这是我使用 onPress 的地方:

onPress={() => this.onProfileButtonPressed()}

onProfileButtonPressed 的函数如下所示:

constructor(props){
    super(props);
    this.state = {
        filteredCellArray: [],
        masterCellArray: []
    };
    this.onProfileButtonPressed = this.onProfileButtonPressed.bind(this);
}

onProfileButtonPressed = () => {
    this.props.navigation.navigate('Profile', this);
    console.log("Profile Button Pressed");
};

下面是带有堆栈和选项卡导航器的路由器:

const TabNav = TabNavigator({
  Profile:{
    screen: Profile,
    tabBarOptions: {
      showLabel: false
    }
  },
  Books:{
    screen: BookTab
  },
  Tutors:{
    screen: TutorTab
  },
  Furniture:{
    screen: FurnitureTab
  },
  Roommate:{
    screen: RoommateTab
  },
  Carpool:{
    screen: CarpoolTab
  }},
  {
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    initialRouteName: 'Books'
});

export const FeedStack = StackNavigator({
  SignIn: {
    screen: SignIn,
    navigationOptions: {
      title: "Login"
    }
  },
  SignUp: {
    screen: SignUp,
    navigationOptions: {
      title: "Create An Account"
    }
  },
  ForgotPassword: {
    screen: ForgotPassword,
    navigationOptions: {
      title: "Forgot Password"
    }
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      title: "Your Profile"
    }
  },
  TabNav: {
    screen: TabNav,
    navigationOptions: {
      title: "Home"
    }
  },
  listing: {
    screen: listing,
    navigationOptions: {
      title: "Listing"
    }
  }
})

Answer 1

我认为您的问题是当前您的 TabNavigator 位于 StackNavigator 内。应该是相反的。

此外，由于您不想在所有 View 中显示它(我猜是在注册中)，因此您需要对其进行自定义。请阅读有关隐藏 TabBar 的文档的更多规范。

但是选项卡的基本逻辑是堆栈位于其中。

如果您将一个函数绑定(bind)到构造函数内的作用域，那么您应该像这样引用它:onPress={this.onProfileButtonPressed}。