反应原生，在屏幕之间移动答案

【问题标题】：react native, moving between screens反应原生，在屏幕之间移动
【发布时间】：2019-01-26 16:53:55
【问题描述】：

我在 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/>

   )}

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

【问题讨论】：

标签： react-native react-navigation stack-navigator

【解决方案1】：

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',
  }
);

【讨论】：

【解决方案2】：

这取自React Navigation documentation

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

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);

【讨论】：