Question

我已经多次更改了代码，但仍然显示错误，没有显示任何内容，没有登录页面，也没有注册页面，我很困惑，现在请帮忙..我是本机反应新手

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'，这样就可以解决问题

反应本机中的路由器流量不显示屏幕

2 个答案: