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

如何使用React Native中的

Navigator

将数据从sceneA传递到sceneB

我用这个去sceneB：

this.props.navigator.push({
id:“主页”，
名称：“主页”
});

您需要在导航器上设置passProps属性。最近有几个关于堆栈溢出的例子，特别是和

{
返回React.createElement（，{…this.props，…route.passProps，navigator，route}）；
}} />

或

{
}
}
/>

如果您正在寻找最基本的设置只是为了了解功能，我已经设置了一个项目，您可以参考，并粘贴了下面的代码

'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);

“严格使用”；
var React=require（'React-native'）；
变量{
评估学，
样式表，
文本，
看法
领航员，
形象,，
可触摸高光，可触摸不透明度
}=反应；
第二类扩展了React.Component{
render（）{
返回(
您好，来自第二组件
id:{this.props.id}
名称：{this.props.name}
名称：{this.props.myVar}
)
} 
}
类Main扩展了React.Component{
gotoNext（myVar）{
这个是.props.navigator.push({
构成部分：二，
通行证：{
id:“页面用户信息”，
名称：“页面用户信息”，
myVar:myVar，
}
})
}
render（）{
返回(
this.gotoNext（'这是一个正在传递的属性'）}>
转到下一页
)
}
}
类应用程序扩展了React.Component{
render（）{
返回(
{
if（路由组件）{
返回React.createElement（route.component，{…this.props，..route.passProps，navigator，route}）；
}
}}
导航栏={
} />
);
}
}
变量NavigationBarRouteMapper={
LeftButton（路线、导航器、索引、导航状态）{
如果（索引>0）{
返回(
{
如果（索引>0）{
navigator.pop（）；
} 
}}>
返回
)}否则{
返回空值}
},
右按钮（路线、导航器、索引、导航状态）{
返回null；
},
标题（路线、导航器、索引、导航状态）{
返回空
}
};
var styles=StyleSheet.create({
});
AppRegistry.registerComponent（'App'，（）=>App）；

有时pass道具不起作用（至少对我来说），所以我要做的是在route对象本身中传递它

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

所以在我使用的下一个场景中访问它

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

虽然这是一种复杂的“访问”，但它是一种傻瓜式的传递道具，可能有效，也可能无效。通过这种方式，您可以传递route对象本身的属性，从而避免以其他方式发送的麻烦

---

这可能不是正确的方法，但我觉得它更方便。

我会将您的导航器设置为。基本上，将导航器放在索引场景中，并将所有必要的组件导入其中。然后，定义一个renderScene（）函数来处理基于名称（或id，就像您所做的那样）的所有路由。我不会使用component对象作为从调用传递到navigator push方法的对象本身，因为如果这样做，则必须在该特定视图中导入组件。我曾经这样做，遇到很多问题，所以我只是警告你，如果你遇到任何问题，考虑这个方法。

renderScene（路线、导航器）{
如果（route.name==“root”）{
返回
}
如果（route.name=='register'）{
返回
}
如果（route.name==“login”）{
返回
}
如果（route.name==“home”）{
返回
}
如果（route.name=='update'）{
返回
}
}

如果您正在使用，只需将

passProps

添加到您的params对象中，根据

例如：

---

您还可以使用以下方法将参数传递给sceneA到sceneB。假设_handlePressOnClick（）写在SceneA屏幕中的某个按钮单击上

_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中定义数据，您在其中以这种方式实现了导航器

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

现在，在sceneB文件中，您可以通过以下方式访问您的其他数据

var {dataA} = this.props.otherData;

or

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

然后在render（）方法中，可以使用state访问其他数据

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

{this.state.otherData.dataA}

---

您还可以使用来使用redux维护全局级别的状态，redux可以通过动作和道具自动访问。

1.在将数据从场景A传递到场景B时，您必须在导航器标记中指定您也在通过路由传递数据。 前

if（route.name==“home”）{
返回
}

从场景A发送数据 例如，

this.props.navigator.push（{name:'sceneB'，数据：{name:this.state.name}，}）

在场景B中，访问这样的数据
例如，
this.props.data.name
并且您可以从场景A到场景B获取数据
如果您的组件位于单独的文件中，请确保将接收器组件导入到发送器组件中。例如，
从“/mycomponent whichreceivespassprops”导入mycomponent，从“/mycomponent whichreceivespassprops”
@Nader谢谢！！！正是我想要的。React的Navigator文档一点帮助都没有。请使用开关而不是if。
_renderScene(route, navigator) {        
    switch(route.name) {
        case "sceneA":
            return (
                <sceneA navigator={navigator} />
            );
        break;
        case "sceneB":
            return (
                <sceneB navigator={navigator} otherData={route.otherData}/>
            );
        break;
  }

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

var {dataA} = this.props.otherData;

or

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

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

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