堆栈导航器未显示屏幕



所以我一直在尝试让堆栈导航器工作。根据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>
      );

我只想出现主。

登录屏幕应在堆栈导航下,登录后,您可以导航到其他屏幕

尝试这样做

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 do


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

相关内容

  • 没有找到相关文章

最新更新