反応ネイティブナビゲータからリアクションナビゲーションに移行

Question

私は見ているチュートリアルから簡単なアプリケーションを構築しようとしています。

このチュートリアルは約5ヶ月経過しており、以下のコードに示すようにナビゲーションの古いReact Navigatorメソッドを使用しています。

私は新しいReact Navigationライブラリを使用しようとしましたが、以下のコードを新しいReact Navationメソッドに適合させる方法が見つかりません。実際、私はどこから始めるべきか分かりません。私はreactnavigation.orgのイントロの文書を読みましたが、それは圧倒的です。

誰かが私を正しい方向に向けることができるかどうか疑問に思っていました。

ありがとうございます！

<Navigator 
    ref = {(ref) => this._navigator = ref } 
    configureScene = { this.configureScene.bind(this)} 
    renderScene = { this.renderScene.bind(this)} 
    /> 


renderScene(route, navigator) { 
    switch(route) { 
    default: { 
     return null; 
    } 
    } 
} 
configureScene(route, routeStack) { 
    return Navigator.SceneConfig.PushFromRight; 
} 

Answer 1

まず第一に、あなたのインポートを追加します。

import { 
    StackNavigator 
} from 'react-navigation'; 

は、コンパイル場合screen_1 & screen_2

（このコードは、デバッグをテストしていない、sがあなたのアプリケーションが2つの画面が含まれていることを言ってみましょうエラーが発生します）

class Screen_1 extends Component{ 
    render(){ 
     return(
      <View flex={1} justifyContent="center" alignItems="center" > 
       <TouchableOpacity onPress={this.navigateToNextScreen.bind(this)}> 
        <Text>Screen 1</Text> 
       </TouchableOpacity> 
      </View> 
      ) 
    } 

    navigateToNextScreen(){ 
     this.props.navigation.navigate("SecondScreen") 
     // notice that the "SecondScreen" is the name of the component 
     // Screen_1 in the AppStack 
    } 
} 

class Screen_2 extends Component{ 
    render(){ 
     return(
      <View flex={1} justifyContent="center" alignItems="center"> 
       <Text>Screen 2</Text> 
      </View> 
     ) 
    } 
} 

次のようにstackNavigatorコンポーネントを作成します。

const AppStack = StackNavigator({ 
    FirstScreen : { 
     screen : Screen_1, 
     navigationOptions : { 
      title : 'Screen 1' 
     } 
    }, 
    SecondScreen : { 
     screen : Screen_2, 
     navigationOptions : { 
      title : 'Screen 2' 
     } 
    } 
}) 

次に、他のコンポーネントとしてAppStackを使用できます。

私も、あなたは次のように反応し、ネイティブ・ナビゲーターのrenderSceneでそれを使用することができると信じてすることができます

renderScene(route, navigator) { 
    switch(route) { 
    default: { 
     return (<AppStack />); 
    } 
    } 
} 

を私は本当にこのyoutube tutorial,が、それは私を持って、20未満で実行されているあなたをお勧めします分。