带参数的导航器 [英] Navigator with args

问题描述

我使用 Navigator 创建了一个 Android 应用.

I created an Android app with Navigator.

在我的第一页上，如果我用按钮或其他按钮按下，我想将不同的信息推送到下一页.

On my first page, I want to push differents informations to the next page if I push with a button or with an other.

我创建了如下的 gotoNext 函数.但是，我不明白如何将 typedmg: 'test' 替换为代表按钮 Pole 或 Aerial 的参数.

I created gotoNext function as below. But, I don't understand how I can replace my typedmg: 'test' by an argument which represent the button Pole or Aerial.

感谢您的帮助.

class LoginPage extends React.Component {
  render() {
    return (
      <Navigator
          renderScene={this.renderScene.bind(this)}
          navigator={this.props.navigator}
          navigationBar={
            <Navigator.NavigationBar routeMapper= NavigationBarRouteMapper} />
      } />
);
}
renderScene(route, navigator) {
return (

....


      <View style={{flex: 4, flexDirection: 'column'}}>
        <TouchableHighlight name='Pole' onPress={this.gotoNext}>
          <Image source={require('./img/radio_damage_pole.png')} />
        </TouchableHighlight>
        <TouchableHighlight name='Aerial' onPress={this.gotoNext}>
          <Image source={require('./img/radio_damage_aerial.png')} />
        </TouchableHighlight>
      </View>

...

);
}
gotoNext() {
 this.props.navigator.push({
  id: 'page_user_infos',
  name: 'page_user_infos',
  typedmg: 'test',
});

}}

推荐答案

您需要通过将 passProps 展开运算符分配给 Navigator 来设置 Navigator 以传递属性.最好的方法是将您的导航器分成它自己的组件，然后为其分配属性.

You need to set up your Navigator to pass properties by assigning the passProps spread operator to the Navigator. The best way to do that is to separate your navigator into it's own component, then assign properties to it.

我已经接受了您的项目并在此处设置了一个类似功能的项目.还有另一个类似的主题，您可以参考此处.下面是我用来让它工作的代码，我希望这会有所帮助！

I've taken your project and set up a similar functioning one here. There was another similar thread you may be able to reference here as well. Below is the code I used to get it working, I hope this helps!

https://rnplay.org/apps/UeyIBQ

'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.typedmg}</Text>
        </View>
    )
  } 
}

class Main extends React.Component {       

  gotoNext(myVar) {
    this.props.navigator.push({
      component: Two,
      passProps: {
          id: 'page_user_infos',
          name: 'page_user_infos',
          typedmg: myVar,
        }
    })
  }

  render() {
    return(
    <View style={{flex: 4, flexDirection: 'column', marginTop:40}}>
    <TouchableHighlight style={{height:40, borderWidth:1, marginBottom:10}} name='Pole' onPress={ () => this.gotoNext('Pole') }>
        <Text>Pole</Text>
    </TouchableHighlight>
    <TouchableHighlight style={{height:40, borderWidth:1, marginBottom:10}} name='Aerial' onPress={ () => this.gotoNext('Aerial') }>
        <Text>Aerial</Text>
    </TouchableHighlight>
  </View>)
  }
}

class App extends React.Component {
  render() {

    return (
      <Navigator
          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 (
      <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
        <Text style={{color: 'white', margin: 10, fontSize: 16}}>
          Data Entry
        </Text>
      </TouchableOpacity>
    );
  }
};


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 28,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    fontSize: 19,
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('App', () => App);

这篇关于带参数的导航器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！