реагировать родной, перемещаясь между экранами - PullRequest
Новая
       38

реагировать родной, перемещаясь между экранами

0 голосов
/ 26 января 2019

Я использую stackNavigator в программе «native native». Проблема в том, что я хочу перейти на другой экран с помощью стекового навигатора.

app.js 

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

Home.js 

 render() {
       return (
       <Header/>

   )}

Заголовок будет отображаться на обоих экранах (Дом и Деталь) в шапке я создал кнопку корзины, которую я хочу нажать на тогда будет открыт экран корзины. Но мой код не работает. Пожалуйста, исправьте мой код.

Ответы [ 2 ]

0 голосов
/ 27 января 2019

Концепция в ответе Зайко абсолютно верна.Но я понял, что this.props.navigation.navigate будет undefined в navigationOptions

Вот рабочий пример вашего требования. 

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',
  }
);
0 голосов
/ 27 января 2019

Это взято из React Navigation документации

У вас есть 3 экрана: Дом, Детали и Корзина. В заголовке Home и Details у вас есть кнопка, которая приведет вас к экрану корзины. Я предлагаю вам взглянуть на раздел «Фундаменталы» документации.

Вот рабочая закуска 

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