web-dev-qa-db-ja.com

undefinedはオブジェクトではありません（ '_this2.props.navigation.navigate'を評価しています）-React Native

ナビゲーションが機能しません。react-navigation（StackNavigator）を使用しています。

これは私の構造です： http://i.imgur.com/IKExx9g.png

私のナビゲーションはHomeScreen.jsで機能します。HomeScreen.jsからNewScreen.jsに問題なくナビゲートします。

App.js：

import React from 'react';
import {
    StatusBar, AppRegistry
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {HomeScreen} from './screens/HomeScreen';
import AboutScreen from "./screens/AboutScreen";
import NewScreen from "./screens/NewScreen";
import CalendarScreen from "./screens/CalendarScreen";
import AddAgendaScreen from "./screens/AddAgendaScreen";

const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},
    About: {screen: AboutScreen},
    New: {screen: NewScreen},
    Calendar: {screen: CalendarScreen},
    AddAgenda: {screen: AddAgendaScreen}
});

console.disableYellowBox = true;
StatusBar.setHidden(true);
export default SimpleApp; // Export root navigator as the root component

Homescreen.js（動作中）：

export class HomeScreen extends React.Component {
  static navigationOptions = ({navigation}) => {
    const {state, navigate} = navigation;
    return {
      title: 'eXopera'
    };
  };

  constructor() {
    super();
    this.state = {
      address: [],
      refreshing: false,
      page: 1,
      lastPage: 1,
      loading: true,
      listOpacity: 0,
    };
  }

  render() {   
    return (
      <ScrollableTabView style={{backgroundColor: '#fff'}} renderTabBar={() => <DefaultTabBar  />}>
        <View style={{flex: 1, backgroundColor: '#fff'}} tabLabel="Adressen">
          <Button color="#33cd5f" title="NEW"
            onPress={() => this.props.navigation.navigate('New') }/>
        </View>
      </ScrollableTabView>
    );
  }
}

次に、CalendarScreen.jsと呼ばれる別のコンポーネントがあります（ここでも、NewScreen.jsに移動しようとします）。HomeScreen.jsからコードを完全にコピーして貼り付けても、移動できません。常に「undefined is a object（evaluating '_this2.props.navigation.navigate'）」と表示されます。

今何ができるか本当にわかりません。何時間もこれに苦労してきました。

前もって感謝します！

javascriptreactjsreact-nativereact-navigation
8
Kenny Hietbrink

反応ナビゲーションとは別に、私は react-native-scrollable-tab-view も使用していました。

タブナビゲーションにナビゲーションプロップを渡すことで解決しました。

<CalendarScreen navigation={this.props.navigation} tabLabel="Agenda"/>

その後、他のコンポーネントでthis.props.navigationとしてもアクセスできます。

21
Kenny Hietbrink

メソッドをrenderHeader(){ ... }から

renderHeader = () => {
    const title= 'Sign Up';
    return (
      <View style={{
        padding: 20,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between'
      }}>
        <Icon
          onPress={() => {
                           this.props.navigation.navigate('find');
                         }
                  }
          name='arrow-back'
          type='MaterialIcons'
          color='white'
        />
      </View>
    );
}

それはこの問題を解決しました。

renderHeader（）を使用する代わりにrenderHeader =（）=> {}を使用する{}は、私の問題を解決する上で非常に重要です。

2
HE xinhao

新しい画面はアプリナビゲーターに登録されていないため、navigationプロパティがありません。コンストラクターは次のようになります。

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  New: { screen: NewScreen }, // Add this
});
1
laurent