ネイティブでのナビゲーションネイティブ

Question

ネイティブのリアクションネイティブに問題があります。テキストを押したときに別の画面に移動したいのですが、奇妙なエラーが発生しています。理由はあまり分かりません。

ここに私のコードブロックと私が受け取っているエラーの画像です。

'use strict' 
 

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

 
import ViewContainer from '../components/ViewContainer'; 
 
import StatusBarBackground from '../components/StatusBarBackground'; 
 
import AppNavigator from '../navigation/AppNavigator' 
 

 
import UserIndexScreen from './UserIndexScreen' 
 

 
class LoginIndexScreen extends Component { 
 

 
    render() { 
 
     return (
 
      <ViewContainer> 
 
       <StatusBarBackground /> 
 
       <View style={styles.textContainer}> 
 
        <Text style={styles.loginText}>Welcome to</Text> 
 
        <TouchableOpacity onPress={(event) => this._navigateToUserIndexScreen()}> 
 
         <Text style={styles.nextStep}>Press to go to User Index Screen</Text> 
 
        </TouchableOpacity> 
 
       </View> 
 
      </ViewContainer> 
 
     ); 
 
    } 
 

 
    _navigateToUserIndexScreen() { 
 
     AppNavigator.props.push({ 
 
      ident: "UserIndex" 
 
     }) 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 

 
    textContainer: { 
 
     flex: 1, 
 
     alignItems: 'center', 
 
     backgroundColor: '#F5FCFF', 
 
    }, 
 

 
    loginText: { 
 
     flexDirection: 'row', 
 
     justifyContent: 'center', 
 
     alignItems: 'center', 
 
     marginTop: 30 
 
    }, 
 

 
    nextStep: { 
 
     marginTop: 80 
 
    } 
 

 
}); 
 

 
module.exports = LoginIndexScreen;

そしてここでは、ナビゲーター・コンポーネントです。

'use strict' 
 

 
import React, { Component } from 'react'; 
 
import { Navigator } from 'react-native'; 
 

 
import RegisterIndexScreen from '../screens/RegisterIndexScreen'; 
 
import LoginIndexScreen from '../screens/LoginIndexScreen'; 
 
import UserIndexScreen from '../screens/UserIndexScreen'; 
 
import PersonProfileScreen from '../screens/PersonProfileScreen'; 
 

 
class AppNavigator extends Component { 
 

 
    _renderScene(route, navigator) { 
 
     var globalNavigatorProps = { navigator } 
 

 
     switch(route.ident) { 
 
      case "RegisterIndexScreen": 
 
       return (
 
        <RegisterIndexScreen {...globalNavigatorProps} /> 
 
       ) 
 
      case "LoginIndexScreen": 
 
       return (
 
        <LoginIndexScreen {...globalNavigatorProps} /> 
 
       ) 
 
      case "UserIndex": 
 
       return (
 
        <UserIndexScreen {...globalNavigatorProps} /> 
 
       ) 
 
      case "Temp": 
 
       return (
 
        <Text>Hello</Text> 
 
       ) 
 
      case "PersonProfileScreen": 
 
       return (
 
        <PersonProfileScreen {...globalNavigatorProps} 
 
        person={route.person} /> 
 
       ) 
 
      default: 
 
       return (
 
        <LoginIndexScreen {...globalNavigatorProps} /> 
 
       ) 
 
     } 
 

 
    } 
 

 
    render() { 
 
     return (
 
      <Navigator 
 
       initialRoute={this.props.initialRoute} 
 
       ref="appNavigator" 
 
       renderScene={this._renderScene} 
 
       configureScene={(route) => ({...route.sceneConfig || Navigator.SceneConfigs.FloatFromRight, })} /> 
 
     ); 
 
    } 
 

 
} 
 

 
module.exports = AppNavigator;

また、ここで私が受けてるエラーの絵です：

を任意のアイデアをいただければ幸いですが！

ありがとうございます！

Answer 1

1. 親で子コンポーネントメソッドを呼び出そうとしています。
2. 呼び出すメソッドは、子コンポーネントの一部ではなく、RN Navigatorメソッドを呼び出しています。
3. ナビゲータのrenderScene関数で表示するために渡したナビゲータオブジェクトを使用する必要があります。

だから一般的にあなたはsthをしたいです。 LoginIndexScreenの_navigateToUserIndexScreen機能の使用は、NVの小道具を渡すに

<LoginIndexScreen nv={navigator} /> 

その後：：のように：AppNavigatorの_renderScene機能パスナビゲータオブジェクトで

this.props.nv.push({ ident: "UserIndex" }) 

また、関数をバインドする必要があります。チェックhttps://facebook.github.io/react/docs/reusable-components.html#no-autobinding