带参数的导航器

Question

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

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

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

感谢您的帮助。

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

} }

Answer 1

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

我已经接受了您的项目并设置了一个类似的功能here。还有另一个类似的线程，您也可以参考here。下面是我用来让它工作的代码，我希望这有帮助！

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