所以我一直试图让堆栈导航器工作。根据 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>
);
我只想让主出现。