Question

如何在React Native中使用Navigator将sceneA中的数据传递给sceneB？

我用这个去了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

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

＆＃13;

  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} />
    }

  }

＆＃13;

Answer 3

有时传球道具不起作用（至少对我来说）所以我所做的是将其传递给路线对象本身

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

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

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

虽然有点复杂的“访问”，但它是傻瓜式传递道具可能工作或者也可能不会以这种方式传递路由对象本身的属性，从而使您免于以不同的方式发送它的麻烦

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

Answer 4

如果您使用react-native-navigation，只需根据documentation将passProps添加到参数对象。

例如：

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

Answer 5

您还可以使用以下方式将参数传递给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;
  }

不要忘记导入像这样的视图文件

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

现在在sceneB文件中，您可以按照以下方式访问您的otherData

var {dataA} = this.props.otherData;

or

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

然后在render（）方法中，您可以使用state访问otherData。

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

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

Answer 6

1.在将数据从场景A传递到场景B时，您必须在导航器标记中指定您还使用路径传递数据。恩。

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

从场景A发送数据离。this.props.navigator.push({name:'sceneB',data:{name:this.state.name},});

在场景B中

访问这样的数据恩。 this.props.data.name 并从场景A到场景B获取数据

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

6 个答案: