createStackNavigator или response-native-router-flux

Question

Привет, пожалуйста, мне нужна помощь, я новичок, чтобы реагировать на родной Я пытаюсь использовать createStackNavigator или response-native-router-flux, оба не работают.ниже приведен фрагмент кода для

App.js

import React, { Component } from "react";
import {StyleSheet,View,StatusBar,Navigator} from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import Login from "./src/pages/Login";
import Signup from "./src/pages/Signup";
import Routes from "./src/Routes";

const MainNavigator = createStackNavigator(
  {
    Login: { screen: Login },
    Signup: { screen: Signup }
  },
  {
    initialRouteName: "Login"
  }
);
const AppContainer = createAppContainer(MainNavigator);

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar backgroundColor="#1c313a" barStyle="light-content" />
        <AppContainer />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#455a64",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});

мой фрагмент кода Routes.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" initial={true} />
          <Scene key="Signup" component={Signup} title="Signup" />
        </Stack>
      </Router>
    );
  }
}

Мой фрагмент кода для Login.js

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

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

export default class Login extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Logo />
        <Form type="Login" />
        <View style={styles.signupTextCont}>
          <Text style={styles.signupText}>Don't have an account yet?</Text>
          <TouchableOpacity>
            <Text style={styles.signupButton}>Signup</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.imagesSignup}>
          <Image
            style={{ width: 50, height: 50, marginHorizontal: 10 }}
            source={require("../images/twitter.png")}
          />
          <Image
            style={{ width: 50, height: 50, marginHorizontal: 10 }}
            source={require("../images/facebook.png")}
          />
          <Image
            style={{ width: 50, height: 50, marginHorizontal: 10 }}
            source={require("../images/linkedin.png")}
          />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#455a64",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  signupTextCont: {
    flexGrow: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 16,
    flexDirection: "row"
  },
  signupText: {
    color: "rgba(255,255,255,0.7)",
    fontSize: 16
  },
  signupButton: {
    color: "#ffffff",
    fontSize: 16,
    paddingHorizontal: 5,
    fontWeight: "500"
  },
  imagesSignup: {
    paddingVertical: 20,
    flexDirection: "row"
  }
});

мой код Фрагмент для Registration.js

import React, { Component } from "react";
import { StyleSheet, Text, View, StatusBar } from "react-native";
import Logo from "../components/Logo";
import Form from "../components/Form";
export default class Signup extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Logo />
        <Form type="Signup" />
        <View style={styles.signupTextCont}>
          <Text style={styles.signupText}>Already Have an account?</Text>
          <Text style={styles.signupButton}>Sign in</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#455a64",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  signupTextCont: {
    flexGrow: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 16,
    flexDirection: "row"
  },
  signupText: {
    color: "rgba(255,255,255,0.7)",
    fontSize: 16
  },
  signupButton: {
    color: "#ffffff",
    fontSize: 16,
    paddingHorizontal: 5,
    fontWeight: "500"
  }
});



whenever i render either AppContainer or Routes i get the same result which is an empty screen, which is suppose to load Login.js

это результат, который я получаю это результат, который я получаю