Reakcyjny Native Navigator

Question

Jak mogę przekazać dane ze sceny A do sceny B z Navigator w React Native?

używam tego, aby przejść do sceneB:

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

Answer 1

Musisz ustawić właściwość passProps w przeglądarce. Istnieje kilka ostatnich przykładów przepełnienia stosu, w szczególności: here i here.

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

lub

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

Jeśli szukasz najbardziej podstawowe konfiguracje po prostu zrozumieć, funkcjonalność, mam założyć projekt here że można odwoływać i wklejony poniżej kod.

'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

Czasem wprost prop nie działa (przynajmniej dla mnie) Więc co mogę zrobić, to przekazać go samego obiektu trasy

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

więc do niego dostęp w następnej scenie I używać

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

chociaż trochę skomplikowany „dostęp”, ale to jest głupi dowód rekwizyty karnet może działać lub nie może również w ten sposób można przekazać właściwości w obiekcie trasy sama oszczędzając w ten sposób od konieczności wysyłania ja w inny sposób.

To może nie być właściwa droga, ale uważam ją za odrobinę wygodniejszą.

Answer 3

Chciałbym skonfigurować nawigatora jako this example. Zasadniczo umieść nawigator w scenie indeksu i sprowadź tam wszystkie niezbędne komponenty. Następnie zdefiniuj funkcję renderScene(), aby obsłużyć wszystkie trasy na podstawie nazwy (lub id, tak jak Ty). Nie użyłbym tego obiektu jako rzeczy, która jest przekazywana z wywołania do metody push navigator, ponieważ jeśli to zrobisz, będziesz musiał zaimportować komponent do tego widoku. Zrobiłem to i wpadłem na wiele problemów, więc ostrzegam cię, jeśli napotkasz jakiekolwiek problemy, zastanów się nad tym.

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

Jeśli używasz react-native-navigation, wystarczy dodać passProps do params obiektu, zgodnie z documentation.

np .:

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

Answer 5

Można również przekazać parametry do Scenea do sceneB stosując następujący sposób. Załóżmy, że _handlePressOnClick() jest zapisany po kliknięciu jakiegoś przycisku na ekranie ScenaA.

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

Następnie zdefiniowano dane w swojej _renderScene gdzie wdrożyliśmy nawigatora jak ten sposób

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

Nie zapomnij zaimportować pliki widoki jak ten

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

Teraz w sceneB plik można uzyskać dostęp do innych danych po drodze

var {dataA} = this.props.otherData; 

or 

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

następnie w swojej metodzie render() można uzyskać dostęp do innych danych przy użyciu stanu.

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

Możesz także użyć do utrzymania stanu globalnego przy użyciu redux dostępnego automatycznie poprzez akcję i rekwizyty.

Answer 6

1. Podczas przesyłania danych ze sceny A do sceny B należy określić w tagu nawigatora, że ​​dane są również przesyłane trasą. np.

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

wysłać dane ze sceny A ex. this.props.navigator.push({name:'sceneB',data:{name:this.state.name},});

w scenie B dane dostępu takie jak ta ex. this.props.data.name , a otrzymasz dane ze sceny A do sceny B