react-native - 屏幕之间的 React Native Navigation 蓝图

Question

这是我的应用程序中的 WelcomeScreen.js

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ImageBackground,
  TextInput,
  Button,
} from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import HealthScreen from "./HealthScreen";
export default class WelcomeScreen extends React.Component {
  render() {
    return (
      <ImageBackground
        style={styles.theImage}
        source={require("../assets/bg-grd_2.png")}
      >
        <Text style={styles.title_1}>Sample text</Text>
        <Image
          source={require("../assets/merge.jpg")}
          style={styles.imageStyle}
        />
        <Text style={[styles.title_1, { fontSize: 29 }, { marginTop: 30 }]}>
          Sample text
        </Text>
        <Text style={[styles.title_1, { fontSize: 29 }, { marginTop: 0 }]}>
          Sample text
        </Text>
        <TouchableOpacity
          onPress={() => this.props.navigation.navigate("Health")}
        >
          <Text>Sample text</Text>
        </TouchableOpacity>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  // all the styles for the code
});

这是我想通过使用导航到的另一个屏幕

onPress{()=>}

在一个按钮中。

这是我的第二个屏幕->

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  ImageBackground,
  TextInput,
} from "react-native";
export default class HealthScreen extends React.Component {
  render() {
    return <Text style={{ textAlign: "center" }}> Know your Health</Text>;
  }
}

如何快速轻松地从 WelcomeScreen 导航到 HealthScreen？我看过一些教程，我想为未来的 react native 应用程序创建一个示例蓝图，因为每当我创建一个新应用程序时，我都必须再次应用已经使用过的逻辑。

先感谢您

标签： react-nativenavigationreact-native-navigationonpress