Question

因此，我在应用程序中创建了三个单独的页面，并且还从React Native中添加了一个Stack Navigator，但是当我单击按钮时，该应用程序不会更改页面。由于这是我在React中的第一个应用程序，因此将不胜感激！

这是我的Add.js的样子；

import React from "react";
import { YellowBox } from "react-native";
import { Font } from "expo";
import Timer from "./src/screens/Timer";
import Splash from "./src/screens/Splash";
import Main from "./src/screens/Main";

import { StackNavigator, DrawerNavigator } from "react-navigation";
const DrawerNavigation = DrawerNavigator({
  Timer: {
    screen: Timer
  },
  Splash: {
    screen: Splash
  },
  Main: {
    screen: Main
  }
});
const StackNavigation = StackNavigator(
  {
    DrawerNavigation: {
      screen: DrawerNavigation`enter code here`
    },
    Timer: {
      screen: Timer
    },
    Splash: {
      screen: Splash
    },
    Main: {
      screen: Main
    }
  },
  {
    headerMode: "none"
  }
);
export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      fontLoaded: false
    };
    YellowBox.ignoreWarnings([
      "Warning: componentWillMount is deprecated",
      "Warning: componentWillReceiveProps is deprecated",
      "Warning: componentWillUpdate is deprecated"
    ]);
  }
  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require("./src/assets/fonts/Arial.ttf") 
/*FallbackFont*/`
    });

    this.setState({ fontLoaded: true });
    console.warn("Fallback font is being used. Please check App.js 
file.");
  }
  render() {
    return this.state.fontLoaded ? <StackNavigation /> : 
<Expo.AppLoading />;
  }
}

这是Main.js;

import React, { Component } from "react";
import Button15 from "../symbols/button15";
import { Center } from "@builderx/utils";
import Button52 from "../symbols/button52";
import { View, StyleSheet, StatusBar, Image, ScrollView } from 
"react-native";

export default class Main extends Component {
  render() {
    return (
      <View style={styles.root}>
        <StatusBar
          barStyle="dark-content"
          style={styles.statusBar}
          animated={true}
        />
        <Button15
          style={styles.button15}
          onPress={() => {
            this.props.navigation.pop();
          }}
        />
        <ScrollView style={styles.scrollArea} horizontal={false} />
        <Center horizontal>
          <Image
            source={require("../assets/DLLargeDarK.jpeg")}
            style={styles.image}
          />
        </Center>
        <Center horizontal>
          <View style={styles.rect3}>
            <View style={styles.rect} />
            <Center horizontal>
              <Button52
                style={styles.button52}
                onPress={() => {
                  this.props.navigation.push("Timer");
                }}
              />
            </Center>
            <View style={styles.rect2} />
          </View>
        </Center>
        <Center>
          <View style={styles.rect4}>
            <View style={styles.rect5} />
            <Button52
              style={styles.button522}
              onPress={() => {
                this.props.navigation.push("Timer");
              }}
            />
            <View style={styles.rect6} />
          </View>
        </Center>
        <Center horizontal>
          <View style={styles.rect7}>
            <View style={styles.rect8} />
            <Button52
              style={styles.button523}
              onPress={() => {
                this.props.navigation.push("Timer");
              }}
            />
            <View style={styles.rect9} />
          </View>
        </Center>
        <Center horizontal>
          <View style={styles.rect10}>
            <View style={styles.rect11} />
            <Button52
              style={styles.button524}
              onPress={() => {
                this.props.navigation.push("Timer");
              }}
            />
            <View style={styles.rect12} />
          </View>
        </Center>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  root: {
    backgroundColor: "#f3f4f4",
    flex: 1
  },

  statusBar: {},
  button15: {
    top: 56,
    left: 338,
    position: "absolute",
    height: 36
  },
  scrollArea: {
    height: 608.9,
    width: 374,
    top: 156,
    left: 0,
    position: "absolute",
    backgroundColor: "rgba(244,244,245,1)",
    opacity: 1
  },
  image: {
    height: 73,
    width: 301,
    position: "absolute",
    top: "6.83%"
  },
  rect3: {
    height: 133,
    width: 347,
    top: 156,
    position: "absolute"
  },
  rect: {
    top: 0,
    left: "0%",
    width: 347,
    height: 91,
    position: "absolute",
    backgroundColor: "rgba(255,255,255,1)",
    opacity: 1
  },
  button52: {
    top: 91,
    height: 36,
    position: "absolute"
  },
  rect2: {
    top: "95.52%",
    left: "0%",
    width: 347,
    height: 6,
    position: "absolute",
    backgroundColor: "rgba(255,255,255,1)",
    opacity: 1
  },
  rect4: {
    width: 347,
    height: 132,
    position: "absolute"
  },
  rect5: {
    top: 0,
    left: "0%",
    width: 347,
    height: 91,
    position: "absolute",
    backgroundColor: "rgba(255,255,255,1)",
    opacity: 1
  },
  button522: {
    top: 91,
    left: "37.46%",
    height: 35,
    position: "absolute"
  },
  rect6: {
    top: "95.52%",
    left: "0%",
    width: 347,
    height: 6,
    position: "absolute",
    backgroundColor: "rgba(255,255,255,1)",
    opacity: 1
  },
  rect7: {
    top: "61.33%",
    width: 347,
    height: 133,
    position: "absolute"
  },
  rect8: {
    top: 0,
    left: "0%",
    width: 347,
    height: 91,
    position: "absolute",
    backgroundColor: "rgba(255,255,255,1)",
    opacity: 1
  },
  button523: {
    top: 91,
    left: "37.46%",
    height: 35,
    position: "absolute"
  },
  rect9: {
    top: "95.52%",
    left: "0%",
    width: 347,
    height: 6,
    position: "absolute",
    backgroundColor: "rgba(255,255,255,1)",
    opacity: 1
  },
  rect10: {
    top: "81.16%",
    width: 347,
    height: 133,
    position: "absolute"
  },
  rect11: {
    top: 0,
    left: "0%",
    width: 347,
    height: 91,
    position: "absolute",
    backgroundColor: "rgba(255,255,255,1)",
    opacity: 1
  },
  button524: {
    top: 91,
    left: "37.46%",
    height: 35,
    position: "absolute"
  },
  rect12: {
    top: "95.52%",
    left: "0%",
    width: 347,
    height: 6,
    position: "absolute",
    backgroundColor: "rgba(255,255,255,1)",
    opacity: 1
  }
});

Answer 1

在React Navigation中，您需要使用navigate方法而不是push

this.props.navigation.navigate("Timer");

要返回上一步，请使用goBack方法而不是pop

this.props.navigation.goBack()

Read more about the navigation prop in the docs

博览会如何在屏幕之间导航

1 个答案: