如何在App.js类中设置rootview反应本机

Question

Need to set Login page as my rootview and used code. if i use the login page details in app.js file getting the result but tried to import login.js in app.js file its not working

import React, {Component} from 'react';
import { StyleSheet, 
  NavigatorIOS,} from 'react-native';

import LoginPage from './src/pages/Login'; 



type Props = {};
export default class App extends Component<{}> {

  render() {
    return (
      <NavigatorIOS
        // style={styles.container}
        initialRoute={{
          title: 'Login',
          component: LoginPage,
        }}/>
    );
  }
}

and in my login.js class

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

export default class Login extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>Login</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

// skip this line if using Create React Native App
AppRegistry.registerComponent('Demo', () => Login);

but it not showing the login page as rootview

Answer 1

I have an excepted answer in the below question .

How to navigate from splash screen to login screen in react native?

There is a google drive link on it from where you can download a sample project , its a simple app figure it out from the sample app how you should set up the App.js .

I suggest You should use StackNavigator for navigation its the best method to follow in my app App.js is configured using StackNavigator .