blocks|key|4452081|text|您需要在导航器上设置passProps属性。最近有一些关于堆栈溢出的例子，特别是here和here。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4452082|<Navigator
++initialRoute={{name:+'Main',+component:+Main,+index:+0}}
++renderScene={(route,+navigator)+=>++++{
++++return+React.createElement(<YourComponent+/>,+{+...this.props,+...route.passProps,+navigator,+route+}+);
++}}+/>|code-block|syntax|javascript|4452083|或|4452084|<Navigator
++initialRoute={{name:+'Main',+component:+Main,+index:+0}}
++renderScene={(route,+navigator)+=>+{
++++++<route.component+{...route.passProps}+navigator={navigator}+route={route}+/>
+++++}
+++}
+/>|4452085|如果您正在寻找最基本的设置只是为了了解其功能，我已经设置了一个项目here供您参考，并粘贴了以下代码。|4452086|'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);|4452087|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/33763709/passprops-equivalent-for-navigator/33767091#33767091|1|https://stackoverflow.com/questions/33825524/navigator-with-args|2|https://rnplay.org/apps/cSM_uw^0|14|4|0|19|4|1|0|0|0|0|X|4|2|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|F|7|19|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1A|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|1B|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|O|3|P|5|F|7|1G|8|@]|9|@]|C|$G|H]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

You need to set up the passProps property on the navigator. There are a few recent examples on stack overflow, specifically <a href="https://stackoverflow.com/questions/33763709/passprops-equivalent-for-navigator/33767091#33767091">here</a> and <a href="https://stackoverflow.com/questions/33825524/navigator-with-args">here</a>.

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

or 

<pre><code>&lt;Navigator
 initialRoute={{name: 'Main', component: Main, index: 0}}
 renderScene={(route, navigator) =&gt; {
 &lt;route.component {...route.passProps} navigator={navigator} route={route} /&gt;
 }
 }
 /&gt;
</code></pre>

If you are looking for the most basic of setups just to understand the functionality, I have set up a project <a href="https://rnplay.org/apps/cSM_uw" rel="nofollow noreferrer">here</a> that you can reference, and pasted the code below.

<pre><code>'use strict';

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

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

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

class App extends React.Component {
 render() {

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


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


var styles = StyleSheet.create({

});

AppRegistry.registerComponent('App', () =&gt; App);
</code></pre>

blocks|key|4452140|text|有时传递属性不起作用(至少对我来说是这样)，所以我要做的就是在路由对象本身中传递它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4452141|nav.push({
++++++++id:+'MainPage',
++++++++name:+'LALA',
++++++++token:+tok
++++++});|code-block|syntax|javascript|4452142|为了在下一个场景中访问它，我将使用|4452143|var+token+=+this.props.navigator.navigationContext.currentRoute.token;|4452144|虽然这是一种复杂的“访问”，但它是非常简单的传递道具，通过这种方式，你可以传递路由对象本身的属性，从而省去了以不同的方式发送它的麻烦。|4452145|这可能不是正确的方式，但我发现它更方便一点。|4452146|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Sometimes the pass prop doesn't work (at least for me) So what I do is I pass it in the route object itself 

<pre><code>nav.push({
 id: 'MainPage',
 name: 'LALA',
 token: tok
 });
</code></pre>

so to access it in the next scene I use

<pre><code>var token = this.props.navigator.navigationContext.currentRoute.token;
</code></pre>

although kind of a complicated "access" but it is fool proof pass props might work or might not also in this way you can pass the properties in the route object itself thus saving you from the hassle of sending it in a different way.

This might not be the right way but I find it a tad bit more convenient.

blocks|key|4452392|text|我会把你的导航器设为this+example。实际上，将导航器放在索引场景中，并将所有必要的组件导入其中。然后，定义一个renderScene()函数，根据名称(或id，就像您所做的那样)处理所有路由。我不会使用component对象作为从调用传递给navigator+push方法的东西本身，因为如果这样做，您将不得不在该特定视图中导入组件。我过去经常这样做，并遇到了许多问题，所以我只是警告您，如果您遇到任何问题，请考虑使用这种方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4452393|​|4452394|++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}+/>
++++}

++}|code-block|syntax|javascript|4452395|4452396|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/itzikbenh/React-Native-on-Rails/blob/master/index.ios.js^0|A|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]]]

I would set up your navigator as <a href="https://github.com/itzikbenh/React-Native-on-Rails/blob/master/index.ios.js" rel="nofollow">this example</a>. Essentially, put the navigator in your index scene and have all the necessary components imported there. Then, define a renderScene() function to handle all the routes based on a name (or id, like you did). I would not use the component object as the thing itself that is passed from the call to the navigator push method because if you do that you will have to import the component in that specific view. I used to do that and ran into many problems, so I am just warning you if you run into any issues, consider this approach.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> renderScene(route, navigator) {

 if(route.name == 'root') {
 return &lt;Root navigator={navigator} /&gt;
 }
 if(route.name == 'register') {
 return &lt;Register navigator={navigator} /&gt;
 }
 if(route.name == 'login') {
 return &lt;Login navigator={navigator} /&gt;
 }
 if(route.name == 'home') {
 return &lt;Home navigator={navigator} {...route.passProps} /&gt;
 }
 if(route.name == 'update') {
 return &lt;Update navigator={navigator} {...route.passProps} /&gt;
 }

 }</code></pre>
</div>
</div>

blocks|key|4452435|text|您也可以通过以下方式将参数从sceneA传递到sceneB。假设_handlePressOnClick()被写在SceneA屏幕上的某个按钮上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4452436|_handlePressOnClick(){+//this+can+be+anything
+this.props.navigator.push({
++++name:+"sceneB",+//this+is+the+name+which+you+have+defined+in+_renderScene
++++otherData:+{
++++++dataA:+"data1"
++++}
+})
}|code-block|syntax|javascript|4452437|然后在实现导航器的_renderScene中定义数据，如下所示|4452438|_renderScene(route,+navigator)+{++++++++
++++switch(route.name)+{
++++++++case+"sceneA":
++++++++++++return+(
++++++++++++++++<sceneA+navigator={navigator}+/>
++++++++++++);
++++++++break;
++++++++case+"sceneB":
++++++++++++return+(
++++++++++++++++<sceneB+navigator={navigator}+otherData={route.otherData}/>
++++++++++++);
++++++++break;
++}|4452439|不要忘记像这样导入视图文件|4452440|import+sceneA+from+'./sceneA';
import+sceneB+from+'./sceneB';|4452441|现在在sceneB文件中，您可以通过以下方式访问您的otherData|4452442|var+{dataA}+=+this.props.otherData;

or

constructor(props){
++super(props);
++this.state={
+++++otherData:+this.props.otherData
++}
}|4452443|然后，在您的render()方法中，您可以使用otherData访问状态。|4452444|<Text>{this.state.otherData.dataA}</Text>|4452445|您还可以使用redux维护全局级别的状态，redux可以通过action和props自动访问。|4452446|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

You can also pass parameters to sceneA to sceneB using following way. Assume that _handlePressOnClick() is written on some button click in SceneA screen.

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

Then defined data in your _renderScene where you have implemented your navigator like this way

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

Don't forget to import your views files like this

<pre><code>import sceneA from './sceneA';
import sceneB from './sceneB';
</code></pre>

Now in sceneB file you can access your otherData following way

<pre><code>var {dataA} = this.props.otherData;

or

constructor(props){
 super(props);
 this.state={
 otherData: this.props.otherData
 }
}
</code></pre>

then in your render() method you can access otherData using state.

<pre><code>&lt;Text&gt;{this.state.otherData.dataA}&lt;/Text&gt;
</code></pre>

You can also use to maintain global level state using redux which is accessible through action and props automatically.

blocks|key|4452485|text|1.在将数据从场景A传递到场景B时，必须在导航器标记中指定还将数据与路由一起传递。例如。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4452486|if(route.name+==+'home')+{
++++++return+<Home+navigator={navigator}+data={route.data}+/>
++++}|code-block|syntax|javascript|4452487|从场景A发送数据例如this.props.navigator.push({name:'sceneB',data:{name:this.state.name},});|offset|length|style|CODE|4452488|在场景B中，像这样访问数据。this.props.data.name，然后将数据从场景A获取到场景B|4452489|entityMap^0|0|0|A|20|0|E|K|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

1.While passing the data from scene A to scene B, you must specify in the navigator tag that you are also passing the data with route.
ex. 

<pre><code>if(route.name == 'home') {
 return &lt;Home navigator={navigator} data={route.data} /&gt;
 }
</code></pre>

send data from scene A
ex.<code>this.props.navigator.push({name:'sceneB',data:{name:this.state.name},});</code>

in scene B access data like this
ex. <code>this.props.data.name</code>
and you get the data from scene A to scene B

How can I pass data from sceneA to sceneB with <code>Navigator</code> in React Native?

I'm using this to go to sceneB: 

<pre class="lang-js prettyprint-override"><code>this.props.navigator.push({
 id: "MainPage",
 name: 'mainPage'
});
</code></pre>

Pass value between component in React Native Navigator

React Native

路由

如何在React Native中使用Navigator将数据从sceneA传递到sceneB？我正在使用这个去访问sceneB：this.props.navigator.push({    id: "MainPage",    name: 'mainPage'});

问在React Native Navigator中的组件之间传递值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在React Native Navigator中的组件之间传递值EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在React Native Navigator中的组件之间传递值
EN