react-native - Stack Navigator 不显示屏幕

Question

所以我一直试图让堆栈导航器工作。根据 console.log('Main') 我确实进入了主屏幕。这就是我想要的。但是，屏幕只是给我一个空白屏幕，只显示标题。我不知道问题是什么。我认为它可能与样式有关，但我已经删除并更改了它，似乎没有任何效果。我一直在导航的只是做 < ScreenName />。但这行不通，因为我也在尝试使用按钮进行导航。 登录主界面截图

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>
      );

我只想让主出现。

标签： react-nativereact-navigationreact-navigation-stack

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/>
    );
  }