使用堆栈导航器和制表符导航器来解决原生

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内。它应该是另一种方式。

此外，由于您不想在所有视图中显示它（例如在注册中，我猜），您需要自定义它。请阅读有关隐藏TabBar的文档中的更多规范。

但是带有制表符的基本逻辑是堆栈在它们内部。

如果你将一个函数绑定到constructor内的作用域，那么你应该像它一样引用它： onPress={this.onProfileButtonPressed}。