Wie funktioniert eine mehrseitige App in reaktiv-nativ?

Question

Die tutorial für reagieren-native zeigt uns, wie eine Single-Seite app zu machen, indem eine „Klasse“ Reagieren zu schaffen, die eine render() Methode nach der App genannt hat, mit allen Rendering-Logik.

macht diese im Grunde eine Seite. Was ist, wenn ich ein paar ziemlich unterschiedliche Seiten habe? Sollte ich diese "App" erstellen und effektiv eine switch-Anweisung in der render-Methode haben, abhängig davon, auf welcher Seite der Benutzer ist, oder ... gibt es eine bessere/eingebaute Möglichkeit, zwischen den Seiten zu wechseln?

Answer 1

Verwenden Navigator oder Modal eine neue Seite aufzurufen.

Answer 2

Navigator ist die Komponente i, diese zu lösen verwenden.

1. Definieren Sie Ihre erste Strecke und allgemeine Eigenschaften in der Render-Methode:

class MyApp extends React.Component { 

render() { 
    return (
     <Navigator 
      initialRoute={{id: 'SplashPage', name: 'Index'}} 
      renderScene={this.renderScene.bind(this)} 
      configureScene={(route) => { 
     if (route.sceneConfig) { 
      return route.sceneConfig; 
     } 
     return Navigator.SceneConfigs.VerticalDownSwipeJump; 
     }}/> 
    ); 
    } 
} 

2. Und dann müssen Sie die anderen Seiten/Ansichten/Seiten definieren, wo Sie hinwollen in die renderScene Methode:

renderScene (route, navigator) { 
    var routeId = route.id; 
    if (routeId === 'SplashPage') { 
     return (
      <SplashPage 
       navigator={navigator}/> 
     ); 
    } 
    if (routeId === 'LoginPage') { 
     return (
      <LoginPage 
       navigator={navigator}/> 
     ); 
    } 
} 
} 

3. in der Splash Klasse Sie sehen, wie Sie Route zur nächsten Seite so schnell wie in diesem Beispiel 2 Sekunden sind über mit fol Brüllen Code: (Ich denke, es wäre besser, wenn es so etwas wie replaceWith sei und nicht nur ersetzen, aber nie den Sinn: P)

class SplashPage extends Component { 
componentWillMount() { 
    var navigator = this.props.navigator; 
    setTimeout (() => { 
     navigator.replace({ 
      id: 'LoginPage', 
     }); 
    }, 2000); 
} 

render() { 
    return (
     <View style={{flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}}> 
      <Image style={{position: 'absolute', left: 0, top: 0, width: windowSize.width, height: windowSize.height}} source={require('image!splash_screen')}></Image> 
     </View> 
    ); 
} 
} 

module.exports = SplashPage; 

Answer 3

I @Mr Browns Antwort gefunden ein wenig verwirrend, so dass ich im Grunde zu sein schrieb es mit dem Code - hier ist also ein einfaches Beispiel Navigator kompatibel mit Android und iOS mit:

var PageOne = React.createClass({ 
 
    _handlePress() { 
 
    this.props.navigator.push({id: 2,}); 
 
    }, 
 

 
    render() { 
 
    return (
 
     <View style={[styles.container, {backgroundColor: 'green'}]}> 
 
     </View> 
 
    ) 
 
    }, 
 
}); 
 

 
var PageTwo = React.createClass({ 
 
    _handlePress() { 
 
    this.props.navigator.pop(); 
 
    }, 
 

 
    render() { 
 
    return (
 
     <View style={[styles.container, {backgroundColor: 'purple'}]}> 
 
     </View> 
 
    ) 
 
    }, 
 
}); 
 

 
var SampleApp = React.createClass({ 
 
    _renderScene(route, navigator) { 
 
    if (route.id === 1) { 
 
     return <PageOne navigator={navigator} /> 
 
    } else if (route.id === 2) { 
 
     return <PageTwo navigator={navigator} /> 
 
    } 
 
    }, 
 

 
    render() { 
 
    return (
 
     <Navigator 
 
     initialRoute={{id: 1, }} 
 
     renderScene={this._renderScene} /> 
 
    ); 
 
    } 
 
});

Der Code sollte selbsterklärend sein. Lass es mich wissen, wenn du etwas nicht verstehst.

Answer 4

Nach der official document, neben react navigation, native navigation und react native navigation bieten plattformübergreifende mehrseitige Lösung. Und NavigatorIOS bietet eine iOS-Komponente.

Ein weiteres relevantes Projekt kann von React Native Router finden.