Question

嗨，我需要一些帮助，一个新的反应本机试图使用createStackNavigator或react-native-router-flux都无法正常工作。以下是

的代码段

App.js

<MenuItem x:Name="MenuTest" 
          Header="this_is_a_Test">
</MenuItem>

我的代码段Routes.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"
  }
});

我的Login.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>
    );
  }
}

我的Signup.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"
  }
});

这就是结果this is what am getting

createStackNavigator或react-native-router-flux

0 个答案: