Question

因此，我一直在尝试使堆栈导航器正常工作。根据console.log（'Main'）我实际上进入了主屏幕。这就是我想要的。但是，该屏幕仅给我一个空白屏幕，仅显示标题。我不知道问题是什么。我以为可能与样式有关，但我已删除并更改了它，似乎也没有任何效果。我一直在导航的方式只是做。但这是行不通的，因为我也在尝试使用按钮浏览。 Screenshot of login Main

App.js
  renderComponent() {
    if (this.state.loggedIn) {
      return (
        <Container />
        )
    } else {
      return (
        <LoginForm />
      )
    }
  }
  render() {
    return (
      <View>
        <Header title='InTouch' />
        {this.renderComponent()}
      </View>
    );
  }
}


Screen Container
import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { View, Button } from 'react-native';
import Main from './src/components/Main'
import Upload from './src/components/Upload'

const NavigationStack = createStackNavigator({
    Main: {screen: Main },
    Upload: {screen: Upload},

},{
    navigationOptions: {
        gesturesEnabled:false
    }
})

const Container = createAppContainer(NavigationStack);

export default Container; 


Main.js

export default class Main extends Component<Props> {
    state = { currentUser: null}

  componentDidMount() {
    const { currentUser } = firebase.auth()

    this.setState({ currentUser })
  }
  render() {
    console.log("Main")
    const { currentUser } = this.state

      return (
        <View>
          <Text>Hello</Text>
          <Button title = "Go to upload story" onPress = {() => this.props.navigation.navigate('Upload')} />
          <Button
          title="Sign out"
          onPress={() => firebase.auth().signOut()} />
        </View>
      );

我只想显示Main。

Answer 1

“登录”屏幕应位于堆栈导航下，登录后，您可以导航至其他屏幕

尝试这样做

const NavigationStack = createStackNavigator({
    Login: {screen: Login }
    Main: {screen: Main },
    Upload: {screen: Upload},

},{
    navigationOptions: {
        gesturesEnabled:false
    }
})

或者，您可以使用switch

为登录屏幕和其他屏幕创建单独的导航

const HomeNavigation = createStackNavigator({
    Main: {screen: Main },
    Upload: {screen: Upload},

},{
    navigationOptions: {
        gesturesEnabled:false
    }
})

const RootNavigation = createSwitchNavigator({
    Login: {screen: Login }
    Home: {screen: HomeNavigation }
});

在App.js中可以做到


  render() {
    return (
      <RootNavigation/>
    );
  }

Stack Navigator不显示屏幕

1 个答案: