2017-02-17 12 views
0

私はreact-nativeをAndroidアプリケーション用に学習しています。 TouchableOpacityを押して2番目の画面を開始しようとしています。私は同じためにnavigatorを使用しています。未定義はオブジェクトではありません(this.props.navigator.pushを評価する)

は、私は、スレッドReact Native, NavigatorIOS, undefined is not an object (evaluating 'this.props.navigator.push')undefined is not an object(evaluating this.props.navigator.push)の多くをチェックしましたが、私のために動作しませんでした。このエラーundefined is not an object(evaluating this.props.navigator.push')

を取得しています。私がここで間違っていることを確信していない、誰でも私を助けることができます。前もって感謝します。

index.android.js

/** 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { AppRegistry, Text, View, TextInput, TouchableOpacity, ToolbarAndroid, StyleSheet,Container,ScrollView, Navigator } from 'react-native'; 


class App extends Component { 
    renderScene (route, navigator) { 
    return <route.component navigator={navigator} /> 
    } 
    render() { 
    return (
     <Navigator 
      style={styles.container} 
      renderScene={this.renderScene.bind(this)} 
      initialRoute={{component: LoginComponent}} 
     /> 
    ); 
    } 
} 

class LoginComponent extends Component { 

    _navigate() { 
     this.props.navigator.push({ 
      component: DashboardComponent 
     }) 
    } 

    render() { 
    return (
      <View style={{flex: 1, flexDirection: 'column'}}> 

      <ToolbarAndroid title='LOGIN' titleColor='white' 
       onIconClicked={() => this.props.navigator.pop()} 
       style={styles.toolbar}/> 

      <View style={{padding:10}}> 

       <TextInput style={{height: 40, borderColor:'gray', borderWidth: .5}} 
        placeholder="Email address" underlineColorAndroid='transparent'/> 

       <TextInput style={{height: 40, borderColor:'gray', borderWidth: .5}} 
        placeholder="Password" secureTextEntry={true} underlineColorAndroid='transparent'/> 

       <TouchableOpacity style={{ height: 40, marginTop: 10 , backgroundColor: '#2E8B57'}} onPress={this._navigate.bind(this)}> 
        <Text style={{color: 'white', textAlign: 'center', marginTop: 10, fontWeight: 'bold'}}>LOGIN</Text> 
       </TouchableOpacity> 
      </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    toolbar: { 
    backgroundColor: '#2E8B57', 
    height: 40, 
    fontFamily: 'noto_serif_regular', 
    }, 
}); 

AppRegistry.registerComponent('ExampleOne',() => LoginComponent); 

second.android.js

import React, { Component } from 'react'; 

class DashboardComponent extends Component { 
    render() { 
    return (
     <Text>Hello!</Text> 
    ); 
    } 
} 
+0

あなたのコードはうまく見えています。あなたの 'TouchableOpacity'に対して' onPress = {()=> this._navigate()} 'を試してください。 –

+0

別のファイルにある2番目のコンポーネントを呼び出そうとしています。私が呼び出すときにエラーが発生しました '変数を見つけることができません:DashboardComponent' –

答えて

3

あなたはAppRegistry.registerComponentに間違ったコンポーネントを登録、それはApp代わりのLoginComponent

ナビゲータコンポーネント最初にレンダリングする必要がある必要があり、それはレンダリングとナビゲーターの小道具を渡しますそれまでのシーン。

+0

+1別のファイルにある2番目のコンポーネントを呼び出そうとしています。 DashboardComponent –

+1

'DashboardComponent'をインポートする必要があります。つまり、' DashboardComponent 'から 'DashboardComponent'をインポートする必要があります。 'DashboardComponent.js'が同じフォルダであると仮定します。あなたの 'index.android.js' – alpha

+0

エラーが発生しました。キャッチされていないエラー:不変の違反:要素タイプが無効です:文字列(組み込みコンポーネント用)またはクラス/関数ですが、オブジェクトがあります。 'Navigator'のレンダリングメソッドを確認してください。 –

関連する問題