在 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(Navigator); 导出默认导航；

在 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'） 请帮我解决这个错误。我正在为导航而苦苦挣扎:(

Answer 1

您将 Navigation 对象传递给 navigationOptions。 并使用navigation.push或navigation.navigate移动屏幕。

Each time you call push we add a new route to the navigation stack. When you call navigate it first tries to find an existing route with that name, and only pushes a new route if there isn't yet one on the stack.

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 />;
  }
}