web-dev-qa-db-ja.com

React Native-ナビゲーションの問題「undefinedはオブジェクトではありません（this.props.navigation.navigate）」

このチュートリアルをフォローしているIm https://reactnavigation.org/docs/intro/ と、少し問題が発生しています。

Expo Clientアプリを使用して、シミュレーター/エミュレーターではなく、毎回アプリをレンダリングしています。

私のコードは下に見られます。

私はもともと「ChatScreen」コンポーネントの上に定義された「SimpleApp」constを持っていましたが、それは私に次のエラーを与えました：

ルート「チャット」は画面を宣言する必要があります。例：..​​. etc

そのため、SimpleAppの宣言を「AppRegistry」のすぐ上に移動し、新しいエラーにフラグを立てました

要素タイプが無効です：予想される文字列.....コンポーネントをエクスポートするのを忘れた可能性があります..etc

チュートリアルでは、Expoアプリで実行しているという事実に関係していると思われるコンポーネントに「export default」というキーワードを追加しませんでしたか？そのため、「HomeScreen」に「export default」を追加すると、エラーはなくなりました。

（次のコードに基づいて）私が取り除くことができないと思われる新しいエラーは次のとおりです：

undefinedはオブジェクトではありません（「this.props.navigation.navigate」を評価）

「const {navigate}」の周りの「{}」を削除しない限り、それを取り除くことはできませんが、ホーム画面からボタンを押すとナビゲーションが中断します

import React from 'react';
import {AppRegistry,Text,Button} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}



class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
javascriptreactjsreact-nativeexpo
11
user3676224

Expoでは、アプリの登録を自分で行うのではなく、Expoに任せる必要があります。常にデフォルトコンポーネントをエクスポートする必要があることに注意してください。また、react-nativeからViewとButtonをインポートする必要がありますコード：

import React from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';

 class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

 class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

const  SimpleAppNavigator = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen }
});

const AppNavigation = () => (
  <SimpleAppNavigator  />
);

export default class App extends React.Component {
  render() {
    return (
        <AppNavigation/>
    );
  }
}
18
Ahmed Khaled A. Mohamed

追加情報：子コンポーネントをネストしている場合は、親コンポーネントのナビゲーションをpropとして渡す必要があります。 //parent.js _<childcomponent navigation={this.props.navigation}/>_

そして、次のようなナビゲーションにアクセスできます//child.js ここに画像の説明を入力してくださいthis.props.navigation.navigate('yourcomponent');

リファレンス： https://reactnavigation.org/docs/en/connecting-navigation-prop.html

3
Bobur Kobulov