反应原生的路由器通量不显示屏幕

Question

我已经多次更改代码，但它仍然显示错误并且没有显示任何内容，没有登录页面也没有注册页面我现在很困惑请帮助..我是新来的反应原生

1. app.js

   import React from 'react';
   import { StyleSheet, View, StatusBar } from 'react-native';
   
   import Routes from './src/Routes';
   
   export default class App extends React.Component {
     render() {
       return (
         <View style={styles.container}>
         <StatusBar
           backgroundColor="#002f6c"
           barStyle="light-content"
           />
          <Routes/>
         </View>
       );
     }
   }
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: '#01579b',
       alignItems: 'center',
       justifyContent: 'center',
     },
   });
   

   **这是我的 Router.js ** 这是我的路由器文件，我在其中提供了链接

   import React, {Component} from 'react';
   import {Router, Stack, Scene } from 'react-native-router-flux';
   
   import Login from './pages/Login';
   import Signup from './pages/Signup';
    export default class Routes extends Component{
   render(){
       return(
          <Router>
          <Stack key="root">
           <Scene key="login" component={Login} title="Login"/>
           <Scene key="register" component={Signup} title="Signup"/>
          </Stack>
          </Router>
           )
   }
   

   }

2.这是我的登录页面

import React, {Component} from 'react';
import{Image, StyleSheet, Text, View, StatusBar } from 'react-native';

export default class Logo extends Component{
    render(){
        return(
            <View style={styles.container}>
           <Image style={{width:70, height:70}}
            source={require('../images/stgi.jpg')} />
            <Text style={styles.logoText}>Welcome to StigiTel</Text>
            </View>
            )
    }
}
});

3.这是我的注册页面

import React,{ Component } from 'react';
import { StyleSheet, Text, View, StatusBar, TouchableOpacity } from 'react-native';
import Logo from '../components/Logo';
import Sform from '../components/Sform';

import {Actions} from 'react-native-router-flux';

export default class Signup extends Component{
  goBack() {
      Actions.pop();
  }

    render(){
        return(
             <View styles={styles.container}>

              <Logo/>
              <Sform type="Signup"/>
              <View style={styles.signupTextCont}>
                    <Text style={styles.signupText}>Already have an account!</Text> 
                    <TouchableOpacity onPress={this.goBack}><Text style={styles.signupButton}> SignIn</Text></TouchableOpacity>
                </View>

             </View>
            )
    }
}
});

Answer 1

你不需要放 Stack 标签， 就这样放吧。

<Router>
<Scene key="root" hideNavBar >
    //put all scene inside it
        <Scene initial key="login" component={Login} title="Login"/>
        <Scene key="register" component={Signup} title="Signup"/>
</Scene>
</Router>

Answer 2

您可以从 app.js 中删除 alignItems:'center'，这样就可以解决问题