React Native - при рендеринге можно перемещаться, но не на панели навигации - PullRequest
0 голосов
/ 03 ноября 2018

Это мои 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.

Booking.js

Это ошибка, которая проявляется.

error

Ошибка вышла, потому что я нажимаю кнопку NEW на панели навигации но когда я нажму на зеленую кнопку New, она перейдет на нужную мне страницу.

В моем рендере навигация работает, но не на панели навигации.

В чем здесь проблема?

1 Ответ

0 голосов
/ 03 ноября 2018

Вы не можете получить доступ к this из метода static. Вы должны использовать объект navigation, который получает navigationOptions.

Так что ваш 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'
      />
    ),
  };

};
...