React Native - 在渲染下可以导航但不能在导航栏中

Question

这是我的Booking.js 代码。

import React, { Component } from 'react';
import { StyleSheet, View, ScrollView, Alert, } from 'react-native';
import { Button } from 'react-native-elements';

class Booking extends Component {
  static navigationOptions = {
    title: 'Booking',
    headerTintColor: 'white',
    headerBackTitle: 'Back',
    headerStyle: { backgroundColor: 'black', },
    headerRight: (
      <Button
        onPress={() => { this.props.navigation.navigate('Bnew') }}
        title='New'
        color='white'
        backgroundColor='black'
      />
    ),
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.boohis}>
          <Button
            onPress={() => { Alert.alert("", "Upcoming is Coming Soon!") }}
            title='Upcoming'
            color='white'
            backgroundColor='black'
            style={{ width: 185, margin:1 }}
          />
          <Button
            onPress={() => { Alert.alert("", "History is Coming Soon!") }}
            title='History'
            color='white'
            backgroundColor='black'
            style={{ width: 185, margin:1 }}
          />
        </View>
        <View style={styles.container2}>
          <ScrollView contentContainerStyle={{ justifyContent: 'space-between', padding: 3, alignItems: 'center' }}>
            <Button
              title='New'
              fontWeight='bold'
              buttonStyle={{ borderRadius: 15, backgroundColor: '#10a366', height: 50, width: 300, margin: 15 }}
              onPress={() => { this.props.navigation.navigate('Bnew') }}
            />
          </ScrollView>
        </View>
      </View>
    )
  }
}

export default Booking;

这是我的Booking.js 的样子。

这是显示的错误。

出现错误是因为我按下导航栏上的NEW 按钮 但是当我点击绿色的New 按钮时，它会导航到我想要的页面。

在我的渲染中，导航可以工作，但在我的导航栏上却不行。

这里有什么问题？

Answer 1

您无法通过static 方法访问this。您必须使用navigationOptions 接收的navigation 对象。

所以你的navigationOptions 应该是这样的。

static navigationOptions = ({ navigation }) => {
  return {
    title: 'Booking',
    headerTintColor: 'white',
    headerBackTitle: 'Back',
    headerStyle: { backgroundColor: 'black' },
    headerRight: (
      <Button
        onPress={() => {
          navigation.navigate('Bnew');
        }}
        title='New'
        color='white'
        backgroundColor='black'
      />
    ),
  };

};