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获取数据