네이티브 내비게이션 문제에 대한 반응 : 전환

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