本机反应，在屏幕之间移动

Question

我在 react native 中使用 stackNavigator。我的问题是我想使用 stack navigator 移动到另一个屏幕。

app.js

    const CartStack=createStackNavigator({
      Header:Header,
      Cart:Cart
   )}
   Const Root=createStackNavigator({
      Home:Home,
      Detail:Detail,
      CartStack:CartStack,  
   )}

Home.js

 render() {
       return (
       <Header/>

   )}

Header 将显示在两个屏幕上（主页和详细信息）在 header 我创建了一个我想点击的购物车按钮然后它将打开购物车屏幕。但是我的代码不起作用。请更正我的代码。

Answer 1

本文摘自React Navigation documentation

您有 3 个屏幕：主页、详细信息和购物车。在主页和详细信息的 header 中，您有一个按钮可以将您带到购物车屏幕。我建议您看一下文档的基础知识部分。

Here is the working Snack

import React from "react";
import { View, Text, Button } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    headerTitle: "Home",
    headerRight: (
      <Button
        onPress={() => navigation.navigate('Cart')}
        title="Cart"
        color="blue"
      />
    )
  });

  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
        <Button
        onPress={() => this.props.navigation.navigate('Details')}
        title="Go to details"
        color="red"
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    headerTitle: "Details",
    headerRight: (
      <Button
        onPress={() => navigation.navigate('Cart')}
        title="Cart"
        color="blue"
      />
    ),
  });

  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Details Screen</Text>
        <Button
        onPress={() => this.props.navigation.navigate('Home')}
        title="Go to home"
        color="red"
        />
      </View>
    );
  }
}

class CartScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Cart Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
    Cart: CartScreen
  },
  {
    initialRouteName: "Home"
  }
);

export default createAppContainer(AppNavigator);

Answer 2

Zayco 的回答中的概念是完全正确的。但我发现 this.props.navigation.navigate 在 navigationOptions

中会是 undefined

这是您要求的working example。

class Home extends React.Component {
  static navigationOptions = ({navigation}) => ({
    title: 'Home',
    headerRight:(<Button title="Cart" onPress={() => navigation.navigate('Cart')}/>)
  })
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Scree</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class Details extends React.Component {
  static navigationOptions = ({navigation}) => ({
    title: 'Details',
    headerRight:(<Button title="Cart" onPress={() => navigation.navigate('Cart')}/>)
  })
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details</Text>
      </View>
    );
  }
}

class Cart extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Cart</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: Home,
    Details: Details,
    Cart:Cart
  },
  {
    initialRouteName: 'Home',
  }
);

本机反应，在屏幕之间移动

react native, moving between screens

react-native

react-navigation

stack-navigator