Question

我正在使用stackNavigator来响应本机。我的问题是我想使用堆栈导航器移到另一个屏幕。

app.js

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

Home.js

 render() {
       return (
       <Header/>

   )}

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

Answer 1

Zayco的回答中的概念绝对正确。但是我发现 navigationOptions

中的this.props.navigation.navigate将是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',
  }
);

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

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

2 个答案: