反应原生导航问题：过渡

Question

本周我开始学习React-native，我正试图测试一个基本导航。我在互联网上搜索过，但我找不到解决办法。

这是我的代码：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity,
  TouchableHighlight,
  Image
} from 'react-native';

class PageOne extends Component {
  constructor(props){
    super(props);
  }

  _handlePress() {

    this.props.navigator.push({component:PageTwo});
  }

  render() {
     let pic = {
      uri: 'http://npsapps.com/wp-content/uploads/2015/09/slider1-bg.png'
    };
    return (
       <View style={{flex: 1, alignItems: 'stretch'}}>
        <Image source={pic} style={{flex: 1, alignItems: 'center', justifyContent:'center'}}>
          <TouchableHighlight style={styles.button} onPress={this._handlePress}>
            <Text style={styles.buttonText}>Hello</Text>
          </TouchableHighlight>
        </Image>
      </View>
    )
  }
}

class PageTwo extends Component {
  constructor(props){
    super(props);
  }

  _handlePress() {
    this.props.navigator.pop();
  }

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'purple'}]}>
        <Text style={styles.welcome}>This is page two!</Text>
       </View>
    )
  }
}

class ReactNativeNavigationExample extends Component {
  _renderScene(route, navigator) {
    return <route.component navigator={navigator} />
  }

  _configureScene(route) {
    //return CustomSceneConfig;
    return Navigator.SceneConfigs.FloatFromRight 
  }

  render() {
    return (
      <Navigator
        initialRoute={{component: PageOne }}
        renderScene={this._renderScene}
        configureScene={this._configureScene} 
        navigationBar={
           <Navigator.NavigationBar
            routeMapper={NavigationBarRouteMapper}/>}
      />
    );
  }
}

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    if(index > 0) {
      return (
        <TouchableHighlight
           underlayColor="transparent"
           onPress={() => { if (index > 0) { navigator.pop() } }}>
          <Text style={ styles.leftNavButtonText }>Back</Text>
        </TouchableHighlight>
    )} 
    else { return null }
  },
  RightButton(route, navigator, index, navState) {
    if (route.onPress) return ( <TouchableHighlight
                                onPress={ () => route.onPress() }>
                                <Text style={ styles.rightNavButtonText }>
                                    { route.rightText || 'Right Button' }
                                </Text>
                              </TouchableHighlight> )
  },
  Title(route, navigator, index, navState) {
    return <Text style={ styles.title }>MY APP TITLE</Text>
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'white',
  }
});

AppRegistry.registerComponent('testProject', () => ReactNativeNavigationExample);

这是我得到的错误：

¿Anybode知道为什么我不能从第二页获得导航器属性？

感谢。

Answer 1

你必须先将_handlePress函数绑定到它的组件上。 您也可以使用箭头功能，而不是创建单独的功能。

class PageTwo extends Component {
  constructor(props){
    super(props);
    this._handlePress=this._handlePress.bind(this)
  }

  _handlePress() {
    this.props.navigator.pop();
  }

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'purple'}]}>
        <Text style={styles.welcome}>This is page two!</Text>
       </View>
    )
  }
}