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