StackNavigationのnavigateメソッドの使い方

Question

UIが反応ネイティブで実行されるAndroidアプリを作成しています。

UIは、4つのファイルがあります。

1. index.android.js：自動的react-native init <app_name>
2. Piper.jsで作成：アプリへのメインエントリを。
3. Screen1.js：アプリの画面＃1。
4. Screen2.js：アプリの画面＃2。

私はAndroid Nugatデバイス（エミュレータではありません）を使用しています。 Screen1（コード怒鳴る）上のボタンをクリックするとまたreact-native run-android

により、コマンドラインからプロジェクトを実行すると、私は赤い画面が出ます：

質問

• なぜメソッドnavigate（const {navigate} = this.props.navigation;、Screen1.js render()を参照）は定義されていませんか？
• どのように使用する必要がありますか？
• StackNavigatorが動作しないコードの内容を教えてください。ここで

ファイルの内容は以下のとおりです。

index.android.js：

import { AppRegistry } from 'react-native'; 
const Piper = require('./js/Piper'); 
AppRegistry.registerComponent('Piper',() => Piper); 

Piper.js

/** 
* @flow 
*/ 
import { StackNavigator } from 'react-navigation'; 
const React = require('React'); 
const Screen1 = require('./intro/Screen1'); 
const Screen2 = require('./intro/Screen2'); 

const piperRoute = StackNavigator({ 
    Screen1: { screen: Screen1}, 
    Screen2: { screen: Screen2}, 
    }); 

class Piper extends React.Component { 
    constructor() { 
    super(); 
    } 
    render(): React.Node { 
    return (
     <Screen1 navigation={piperRoute}/>   
    ); 
    } 
} 
module.exports = Piper; 

Screen1.js

/** 
* 
* @providesModule Screen1 
* @flow 
*/ 
"use strict"; 

import StackNavigator from 'react-navigation'; 
/* other imports used in render() */ 

class Screen1 extends React.Component<{navigation: StackNavigator}> { 
    static navigationOptions = { title: "Welcome" } 

    constructor() { 
    super(); 
    } 

    render(): React.Node { 
    const {navigate} = this.props.navigation; 
    return (
     <View> 
     <Button 
      title='ok'   
      onPress={() => navigate('RequestPermission', {navigation: this.props.navigation})} 
     />   
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ /* ... styles ...*/}); 

module.exports = Screen1; 

Screen2.js

/** 
* 
* @providesModule Screen2 
* @flow 
*/ 
'use strict'; 
import StackNavigator from 'react-navigation'; 

/* other imports */ 

class Screen2 extends React.Component<{navigation: StackNavigator}> { 
    render(): React.Node { 
    return (
     <View> 
     <Image ... /> 
     </View> 
    ); 
    } 
} 
const styles = StyleSheet.create({ /* ... */ }); 
module.exports = Screen2; 

Answer 1

代わりにこれを試してみてください。エントリポイントでのレンダリングのためにナビゲータを渡す必要があります.Stackナビゲータはscreen1コンポーネントを自動的に読み込みます。ナビゲーション小道具はその時しか利用できません。

Piper.js

/** 
* @flow 
*/ 
import { StackNavigator } from 'react-navigation'; 
const React = require('React'); 
const Screen1 = require('./intro/Screen1'); 
const Screen2 = require('./intro/Screen2'); 

const piperRoute = StackNavigator({ 
    Screen1: { screen: Screen1}, 
    Screen2: { screen: Screen2}, 
    }); 

class Piper extends React.Component { 
    constructor() { 
    super(); 
    } 
    render(): React.Node { 
    return (
     <piperRoute/>   
    ); 
    } 
} 
module.exports = Piper;