2016-05-11 25 views
0

ReactNativeの初心者 私はNavigatorEXクラスを作成しました。これは通常MiladViewをレンダリングしますが、HadiViewクラスにナビゲートしていません。 routeまたはpushメソッドの問題点は何ですか? このコードはReact-Native 0.25によ​​ってES6で書かれています。React Native NavigatorIOS

import React, { Component } from 'react'; 
 
import { 
 
    AppRegistry, 
 
    StyleSheet, 
 
    Text, 
 
    View, 
 
    NavigatorIOS 
 
} from 'react-native'; 
 

 
class NavigatorEX extends Component { 
 

 
    render() { 
 
    return (
 
     <NavigatorIOS 
 
     style={styles.nav} 
 
     titleTextColor="#212121" 
 
     navigationBarHidden={false} 
 
     initialRoute={{ 
 
      component: MiladView, 
 
      title: 'Milad', 
 
      rightButtonTitle: 'Go', 
 
      onRightButtonPress:() => { 
 
      this.props.navigator.push({ 
 
       component: HadiView, 
 
       title: 'Hadi', 
 
       leftButtonTitle: 'Back', 
 
       onLeftButtonPress:() => this.props.navigator.pop(), 
 
      }); 
 
      }, 
 
     }} 
 
     /> 
 
    ); 
 
    } 
 
} 
 

 
class HadiView extends Component { 
 

 
    render(){ 
 
    return (
 
     <View style={styles.container}> 
 
     <Text style={styles.welcome}> 
 
      Hadi 
 
     </Text> 
 
     </View> 
 
    ) 
 
    } 
 
} 
 

 
class MiladView extends Component { 
 

 
    render(){ 
 
    return (
 
     <View style={styles.container}> 
 
     <Text style={styles.welcome}> 
 
      Milad 
 
     </Text> 
 
     </View> 
 
    ) 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    container: { 
 
    flex: 1, 
 
    alignItems: 'center', 
 
    justifyContent: 'center', 
 
    backgroundColor: '#FAFAFA', 
 
    }, 
 
    nav: { 
 
    flex: 1, 
 
    }, 
 
    welcome: { 
 
    fontSize: 20, 
 
    textAlign: 'center', 
 
    margin: 10, 
 
    }, 
 
    instructions: { 
 
    textAlign: 'center', 
 
    color: '#333333', 
 
    marginBottom: 5, 
 
    }, 
 
}); 
 

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

+0

this.navigator.push私はあなたが '私が変更した' onRightButtonClick' –

+0

@NaderDabit対onRightButtonPress'必要かもしれないと思いますそれは動作しません。 chromeデバッガは次の点を指摘しています: 'this.props.navigator.push({' –

答えて

0

NavigatorIOSにref={navigator => this.navigator = navigator}を追加してみてください、その後、this.props.navigator.push

<NavigatorIOS 
    ref={navigator => this.navigator = navigator} 
    style={styles.nav} 
    titleTextColor="#212121" 
    navigationBarHidden={false} 
    initialRoute={{ 
    component: MiladView, 
    title: 'Milad', 
    rightButtonTitle: 'Go', 
    onRightButtonPress:() => { 
     this.refs.navigator.push({ 
      component: HadiView, 
      title: 'Hadi', 
      leftButtonTitle: 'Back', 
      onLeftButtonPress:() => this.refs.navigator.pop(), 
     }); 
     }, 
    }} 
    /> 
+1

これは完全に正解です。ありがとうございます。Mr. @ NaderDabit –

+0

今はrefが廃止されているようです。 – Herno