Gezgini Navigator'da görünümünü değiştir React Native

Question

Doğal olarak tepki vermek için yeni kulüpler.

NavigatorIOS kullanıyordum ama çok sınırlayıcıydı, bu yüzden Navigator kullanmaya çalışıyorum. NavigatorIOS'ta this.props.navigator.push() numaralı telefonu arayarak bir görünümü değiştirebilirim ancak Navigator'da çalışmıyor, farklı yapılandırılmış görünüyor. Navigator'u kullanarak görünümleri nasıl değiştirebilirim?

asgari çalışma gezgini var

Answer 1

- çok daha fazlasını yapabilir (sonunda bakın):

1. Sen belirtmeniz gerekir Navigator'de Navigator bileşeni
2. işlemek için ana "navigator" görünümünü ihtiyaç Farklı yollar için sahneleri nasıl oluşturmalısınız (renderScene özelliği)
3. Bu "renderScene" yönteminde, hangi yolun oluşturulduğuna bağlı olarak View (sahne) oluşturmalısınız. Rota, düz bir javascript nesnesidir ve kongre sahneleri, rotanın "id" parametresiyle tanımlanabilir. Açıklık ve endişelerin ayrılması için genellikle her sahneyi ayrı adlandırılmış bileşen olarak tanımlarım ve yalnızca bir kural olsa da, bu bileşenlerin adını "id" olarak kullanır. Her ne olursa olsun (örneğin sahne numarası gibi) olabilir. Daha fazla gezinebilmeniz için navigator'u renderScene'teki tüm görünümlere özellik olarak aktardığınızdan emin olun (aşağıdaki örneğe bakın)
4. Başka bir görünüme geçmek istediğinizde, aslında bu görünüme giden yolu itin veya değiştirin veya navigatör Bu rotayı sahne olarak oluşturma ve sahneyi düzgün bir şekilde animasyon yapma hakkında (animasyon seti oldukça sınırlı olsa da) - genel animasyon şemasını kontrol edebilir, ancak her sahnenin farklı şekilde animasyon yapmasını sağlayabilirsiniz (bazı örnekler için resmi belgelere bakın).

   render: function() { 
   <Navigator style={styles.navigator} 
        renderScene={(route, nav) => 
        {return this.renderScene(route, nav)}} 
   /> 
   }, 
   
   renderScene: function(route,nav) { 
       switch (route.id) { 
        case "SomeComponent": 
        return <SomeComponent navigator={nav} /> 
        case "SomeOtherComponent: 
        return <SomeOtherComponent navigator={nav} /> 
       } 
   } 
   

   : Eğer

"Navigator" Görünüm (vb değiştirerek, haşhaş, yeni iterek) yığın zaten olanlar arasında serbestçe hareket böylece Navigator yollarının yığını (daha doğrusu dizi) tutar

SomeComponent: Eğer numuneler projede bir çok örnek bulabilirsiniz burada

onSomethingClicked: function() { 
    // this will push the new component on top of me (you can go back) 
    this.props.navigator.push({id: "SomeOtherComponent"}); 
} 


onSomethingOtherClicked: function() { 
    // this will replace myself with the other component (no going back) 
    this.props.navigator.replace({id: "SomeOtherComponent"}); 
} 

fazla detay https://facebook.github.io/react-native/docs/navigator.html ve bir parçası olan tepki yerli: https://github.com/facebook/react-native/tree/master/Examples/UIExplorer

Answer 2

Facebook uygulamasının Navigator'ın nasıl çalıştığını gösterirken basit veya karmaşık olması gerektiğini düşünüyorum. @ Jarek-potiuk örneğine dayanarak, ekranları ileri geri değiştirecek basit bir uygulama oluşturdum. Bu örnekte

kullanıyorum

: react-native: 0.36.1

index.android.js

import React, { Component } from 'react'; 
import { AppRegistry, Navigator } from 'react-native'; 

import Apple from './app/Apple'; 
import Orange from './app/Orange' 

class wyse extends Component { 
    render() { 
    return (
     <Navigator 
     initialRoute={{screen: 'Apple'}} 
     renderScene={(route, nav) => {return this.renderScene(route, nav)}} 
     /> 
    ) 
    } 

    renderScene(route,nav) { 
    switch (route.screen) { 
     case "Apple": 
     return <Apple navigator={nav} /> 
     case "Orange": 
     return <Orange navigator={nav} /> 
     } 
    } 
} 

AppRegistry.registerComponent('wyse',() => wyse); 

app/Apple.js

import React, { Component } from 'react'; 
import { View, Text, TouchableHighlight } from 'react-native'; 

export default class Apple extends Component { 
    render() { 
    return (
     <View> 
     <Text>Apple</Text> 
     <TouchableHighlight onPress={this.goOrange.bind(this)}> 
      <Text>Go to Orange</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 

    goOrange() { 
    console.log("go to orange"); 
    this.props.navigator.push({ screen: 'Orange' }); 
    } 
} 

app/Turuncu. js

import React, { Component, PropTypes } from 'react'; 
import { View, Text, TouchableHighlight } from 'react-native'; 

export default class Orange extends Component { 
    render() { 
    return (
     <View> 
     <Text>Orange</Text> 
     <TouchableHighlight onPress={this.goApple.bind(this)}> 
      <Text>Go to Apple</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 

    goApple() { 
    console.log("go to apple"); 
    this.props.navigator.push({ screen: 'Apple' }); 
    } 
} 

Answer 3

Aynı sorunu yaşıyordum, iyi bir navigasyon örneği bulamadım. Yeni bir ekrana gitmek için görünümleri kontrol etme yeteneğini istedim, ancak aynı zamanda önceki ekrana geri dönme yeteneğine de sahip oldum.

Yukarıdaki cevabı Andrew Wei tarafından kullandım ve yeni bir uygulama oluşturup daha sonra onun kodunu kopyaladım. Bu iyi çalışıyor ancak .push birbiri üzerinde yeni katmanlar oluşturmaya devam edecek (Apple> Orange> Apple> Orange> Apple> Orange vb.). Bu yüzden,'udosyasında .push yerine goApple() altında kullandım.

Bu, diğer sayfalara nasıl gidileceğini öğretirken, aradığım şey olan "geri" düğmesi gibi çalışıyor.