Навигация между 2 экранами реагирует на родную навигацию. - PullRequest
Новая
       45

Навигация между 2 экранами реагирует на родную навигацию.

0 голосов
/ 26 марта 2020

Я пытался создать специальный экран для навигации под названием Navigate. js. Вот что я написал: 

/**

 * Navigate.js

 *

 * Root component of the app, 

 * responsible for setting up routes.

 *

*/



// Libs

import React from 'react';

import { View, Text, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';

import { createStackNavigator } from 'react-navigation-stack';



// Components

import OfferScreen from './screens/OffersScreen';

import Post from './screens/Post';



/**

 * createStackNavigator

 *

 * Creates a stack of our routes.

 *

*/

const Navigator = createStackNavigator({

    OfferScreen: { screen: OfferScreen },

    Post: { screen: Post },

});



/**

 * createAppContainer

 *

 * Responsible for managing app state and linking

 * the top-level navigator to the app environment.

 *

*/

const Nav = createAppContainer (Navigator); экспорт по умолчанию Nav;

В OfferScreen у меня есть этот код: 

static navigationOptions =({}) =>({
    title: "Oferte",
    headerTitleStyle: { alignSelf: 'center', },
    headerStyle: {
      backgroundColor: '#BA272A',
    },
    headerRight: (

     <View style={{paddingRight:11}}>
       <Button
        color="#ff5c5c" title="Tombola"
        onPress={() =>
          this.props.navigation( 'Post' )}

       />
    </View> 
    ),
    headerTintColor: 'white',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  })

Ошибка говорит следующее: undefined не является объектом (оценка 'OfferScreen.props.navigation') Пожалуйста, помогите мне с эта ошибка. Я борюсь с навигацией: (* ​​1009 *

1 Ответ

1 голос
/ 26 марта 2020

Вы доставляете объект Навигация на navigationOptions. И используйте navigation.push или navigation.navigate для перемещения экрана.

Каждый раз, когда вы вызываете push, мы добавляем новый маршрут в стек navigation. Когда вы вызываете navigate, он сначала пытается найти существующий маршрут с этим именем и проталкивает новый маршрут, только если в стеке его еще нет. 

static navigationOptions = ({ navigation }) => {
    title: "Oferte",
    headerTitleStyle: { alignSelf: 'center', },
    headerStyle: {
      backgroundColor: '#BA272A',
    },
    headerRight: (

     <View style={{paddingRight:11}}>
       <Button
        color="#ff5c5c" title="Tombola"
        onPress={() =>
          navigation.push( 'Post' )}

       />
    </View> 
    ),
    headerTintColor: 'white',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  })

Пример 

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'; // Version can be specified in package.json

class HomeScreen extends React.Component {

  static navigationOptions =({navigation}) =>({
    title: "Oferte",
    headerTitleStyle: { alignSelf: 'center', },
    headerStyle: {
      backgroundColor: '#BA272A',
    },
    headerRight: (

     <View style={{paddingRight:11}}>
       <Button
        color="#ff5c5c" title="Tombola"
        onPress={() =>
          navigation.push( 'Details' )}

       />
    </View> 
    ),
    headerTintColor: 'white',
  })

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

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

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

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}
...