Native Navigator reagieren

Question

Wie kann ich Daten von SceneA zu SceneB mit Navigator in React Native übergeben?

Ich verwende diese zu sceneB gehen:

this.props.navigator.push({ 
    id: "MainPage", 
    name: 'mainPage' 
}); 

Answer 1

Sie benötigen die passProps Eigenschaft auf den Navigator einzurichten. Es gibt einige aktuelle Beispiele für Stack-Überlauf, speziell here und here.

<Navigator 
    initialRoute={{name: 'Main', component: Main, index: 0}} 
    renderScene={(route, navigator) => { 
    return React.createElement(<YourComponent />, { ...this.props, ...route.passProps, navigator, route }); 
    }} /> 

oder

<Navigator 
    initialRoute={{name: 'Main', component: Main, index: 0}} 
    renderScene={(route, navigator) => { 
     <route.component {...route.passProps} navigator={navigator} route={route} /> 
    } 
    } 
/> 

Wenn Sie sich für den einfachsten Setups einfach nur um die Funktionalität zu verstehen, ich habe ein Projekt here einrichten, die Sie verweisen können, und klebte den Code unten.

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Navigator, 
    Image, 
    TouchableHighlight, TouchableOpacity 
} = React; 

class Two extends React.Component { 
    render(){ 
    return(
     <View style={{marginTop:100}}> 
      <Text style={{fontSize:20}}>Hello From second component</Text> 
      <Text>id: {this.props.id}</Text> 
      <Text>name: {this.props.name}</Text> 
      <Text>name: {this.props.myVar}</Text> 
     </View> 
    ) 
    } 
} 

class Main extends React.Component { 
    gotoNext(myVar) { 
    this.props.navigator.push({ 
     component: Two, 
     passProps: { 
     id: 'page_user_infos', 
     name: 'page_user_infos', 
     myVar: myVar, 
     } 
    }) 
    } 

    render() { 
    return(
     <View style={{flex: 4, flexDirection: 'column', marginTop:100}}> 
     <TouchableHighlight style={{ height:40, borderWidth:1, marginBottom:10, backgroundColor: '#ddd'}} name='Pole' onPress={() => this.gotoNext('This is a property that is being passed') }> 
      <Text style={{textAlign:'center'}}>Go to next page</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 
} 

class App extends React.Component { 
    render() { 

    return (
     <Navigator 
       style={{flex:1}} 
      initialRoute={{name: 'Main', component: Main, index: 0}} 
      renderScene={(route, navigator) => { 
      if (route.component) { 
          return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route }); 
         } 
       }} 
      navigationBar={ 
      <Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} /> 
     } /> 
); 
} 
} 


var NavigationBarRouteMapper = { 
    LeftButton(route, navigator, index, navState) { 
    if(index > 0) { 
     return (
     <TouchableHighlight style={{marginTop: 10}} onPress={() => { 
      if (index > 0) { 
       navigator.pop(); 
      } 
     }}> 
     <Text>Back</Text> 
    </TouchableHighlight> 
)} else { 
return null} 
}, 
    RightButton(route, navigator, index, navState) { 
    return null; 
    }, 
    Title(route, navigator, index, navState) { 
    return null 
    } 
}; 


var styles = StyleSheet.create({ 

}); 

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

Answer 2

Manchmal ist der Pass prop funktioniert nicht (zumindest für mich) Also, was ich tue, ist ich es in der Route-Objekt übergeben sich

nav.push({ 
     id: 'MainPage', 
     name: 'LALA', 
     token: tok 
     }); 

so dass es ich in der nächsten Szene zugreifen verwenden

var token = this.props.navigator.navigationContext.currentRoute.token; 

obwohl Art einer komplizierten „access“, aber es ist narrensicher Pass Requisiten arbeiten könnten oder auch nicht auf diese Weise können Sie die Eigenschaften in dem Route-Objekt übergeben sich damit Sie von der Hektik des Sendens Spar ich t auf eine andere Art und Weise.

Dies ist vielleicht nicht der richtige Weg, aber ich finde es ein bisschen bequemer.

Answer 3

Ich würde Ihren Navigator als this example einrichten. Stellen Sie den Navigator im Wesentlichen in Ihre Index-Szene und lassen Sie alle notwendigen Komponenten dorthin importieren. Definieren Sie dann eine renderScene() - Funktion, um alle Routen basierend auf einem Namen (oder einer ID, wie Sie es getan haben) zu behandeln. Ich würde das Komponentenobjekt nicht als die Sache selbst verwenden, die vom Aufruf an die Navigator-Push-Methode übergeben wird, denn wenn Sie das tun, müssen Sie die Komponente in dieser bestimmten Ansicht importieren. Ich habe das gemacht und bin auf viele Probleme gestoßen, also warne ich Sie nur, wenn Sie auf irgendwelche Probleme stoßen, denken Sie über diesen Ansatz nach.

renderScene(route, navigator) { 
 

 
    if(route.name == 'root') { 
 
     return <Root navigator={navigator} /> 
 
    } 
 
    if(route.name == 'register') { 
 
     return <Register navigator={navigator} /> 
 
    } 
 
    if(route.name == 'login') { 
 
     return <Login navigator={navigator} /> 
 
    } 
 
    if(route.name == 'home') { 
 
     return <Home navigator={navigator} {...route.passProps} /> 
 
    } 
 
    if(route.name == 'update') { 
 
     return <Update navigator={navigator} {...route.passProps} /> 
 
    } 
 

 
    }

Answer 4

Wenn Sie react-native-navigation verwenden, fügen Sie einfach passProps zu Ihrem params Objekt, nach documentation.

zB .:

this.props.navigator.push({ 
    screen: 'example.Screen', 
    title: 'Screen Title', 
    passProps: { 
    id: 'MainPage', 
    name: 'mainPage' 
    } 
}) 

Answer 5

Sie auch Parameter SCENEA passieren können unter Verwendung folgende Weise sceneB. Angenommen, dass _handlePressOnClick() bei einigen Schaltflächen im SceneA-Bildschirm angezeigt wird.

_handlePressOnClick(){ //this can be anything 
this.props.navigator.push({ 
    name: "sceneB", //this is the name which you have defined in _renderScene 
    otherData: { 
     dataA: "data1" 
    } 
}) 
} 

definiert Dann werden die Daten in Ihrem _renderScene, wo Sie Ihren Navigator wie auf diese Weise

_renderScene(route, navigator) {   
    switch(route.name) { 
     case "sceneA": 
      return (
       <sceneA navigator={navigator} /> 
      ); 
     break; 
     case "sceneB": 
      return (
       <sceneB navigator={navigator} otherData={route.otherData}/> 
      ); 
     break; 
    } 

Vergessen Sie nicht, Ihre Ansichten Dateien wie diese in sceneB

import sceneA from './sceneA'; 
import sceneB from './sceneB'; 

nun umgesetzt haben zu importieren Datei Sie können auf Ihre anderenDaten folgenden Weg zugreifen

var {dataA} = this.props.otherData; 

or 

constructor(props){ 
    super(props); 
    this.state={ 
    otherData: this.props.otherData 
    } 
} 

Dann können Sie in Ihrer render() - Methode auf anderenDaten mit Status zugreifen.

<Text>{this.state.otherData.dataA}</Text> 

Sie können auch verwenden, um den Status der globalen Ebene mit redux, die durch Aktion und Requisiten automatisch zugänglich ist, beizubehalten.

Answer 6

1.Während der Übergabe der Daten von Szene A an Szene B müssen Sie im Navigator-Tag angeben, dass Sie auch die Daten mit Route weiterleiten. ex.

if(route.name == 'home') { 
     return <Home navigator={navigator} data={route.data} /> 
    } 

Sendedaten von Szene A ab. this.props.navigator.push({name:'sceneB',data:{name:this.state.name},});

in Szene B Zugriffsdaten wie diese ex. this.props.data.name und Sie erhalten die Daten von Szene A zu Szene B