Migration von reaktiv-nativen Navigator zu React Navigation

Question

Ich versuche, eine einfache App aus einem Tutorial zu erstellen, das ich gerade sehe.

Dieses Tutorial ist jetzt etwa 5 Monate alt und verwendet die alte React Navigator-Methode der Navigation, wie im folgenden Code zu sehen ist.

Also habe ich versucht, die neue React Navigation-Bibliothek zu verwenden, aber ich finde keine Möglichkeit, den unten stehenden Code in die neue React Navgation-Methode zu integrieren. Tatsächlich weiß ich nicht wirklich, wo ich anfangen soll. Ich lese die Intro-Dokumente bei reactnavigation.org durch, aber es ist irgendwie überwältigend.

Ich fragte mich, ob jemand mich in die richtige Richtung zeigen könnte.

Danke!

<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

Zu allererst, fügen Sie Ihre Import:

import { 
    StackNavigator 
} from 'react-navigation'; 

Lass uns sagen, dass Ihre App zwei Bildschirme enthält, Screen_1 & screen_2

(dieser Code nicht getestet wird, zu debuggen, wenn eine Kompilation Fehler auftritt)

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> 
     ) 
    } 
} 

Sie erstellen eine stackNavigator-Komponente wie folgt:

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

Dann können Sie den AppStack als jede andere Komponente verwenden.

Ich kann sogar glauben, dass Sie es in der renderScene Ihrer reagieren-native Navigator wie folgt verwendet werden:

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

Ich würde wirklich empfehlen Ihnen, diese youtube tutorial, es hat mich und läuft in weniger als zwanzig Protokoll.