React Native Navigator

Question

如何在React Native中將數據從sceneA傳遞到sceneB與Navigator？

我用這個去sceneB：

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

Answer 1

您需要設置導航儀上的passProps財產。最近有幾個堆棧溢出示例，具體爲here和here。

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

或

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

如果您正在尋找最基本的設置只是爲了理解的功能，我已成立了一個項目here，你可以參考，並粘貼下面的代碼。

'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

有時通道具不會（至少對我來說）工作，所以我做的是我通過它的路由對象本身

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

所以要訪問它的下一個場景我使用

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

雖然種類的複雜的「訪問」，但它是傻瓜證明通道具可能工作會或可能不會也這樣，你可以從發送的麻煩傳遞路由對象從而本身節省您的屬性一世以不同的方式。

這可能不是正確的方法，但我覺得它有點更方便。

Answer 3

我會將您的導航器設置爲this example。實質上，將導航器放在索引場景中，並將所有必需的組件導入到那裏。然後，定義一個renderScene（）函數來處理基於名稱（或ID，如你所做的）的所有路由。我不會使用組件對象作爲從調用導航器推送方法傳遞過來的東西本身，因爲如果你這樣做了，你將不得不導入組件在該特定視圖中。我曾經這樣做，遇到了很多問題，所以我只是警告你，如果遇到任何問題，請考慮這種方法。

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

如果使用react-native-navigation，只需添加passProps您PARAMS目的，根據documentation。

例如：

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

Answer 5

您也可以傳遞參數給sceneA使用下面的方法來sceneB。假設在SceneA屏幕上點擊某個按鈕，_handlePressOnClick（）被寫入。

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

然後，你已經實現了你的導航像這樣

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

不要忘了在sceneB導入您的意見文件，這樣

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

現在定義在_renderScene數據你可以通過以下方式訪問你的其他數據：

var {dataA} = this.props.otherData; 

or 

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

然後在render（）方法中可以使用狀態訪問其他數據。

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

您還可以使用通過動作和道具自動訪問的redux來維護全局級別狀態。

Answer 6

1.在將數據從場景A傳遞到場景B時，必須在導航器標籤中指定您還將路由傳遞給數據。 ex。

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

發送來自場景A的數據A ex。 this.props.navigator.push({name:'sceneB',data:{name:this.state.name},});

在場景B訪問這樣的數據 前。 this.props.data.name 並且您從場景A到場景B獲取數據