在navigationOptions中反应原生的2个屏幕之间的导航

Question

我尝试创建一个名为 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(导航器); 导出默认导航；

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

错误说明：未定义不是对象（评估 'OfferScreen.props.navigation' ）请帮助我解决此错误。 我正在为导航而苦苦挣扎:(

Answer 1

您将 Navigation 对象传递给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 />;
  }
}