导航选项中react native中的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(导航器(；导出默认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"(请帮我纠正这个错误。我很难导航：(

Answer 1

您将导航对象交付给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 />;
}
}