在React Native中导航

Question

我在React Native中遇到Navigator问题。我想在按下某些文本时导航到另一个屏幕，但出现一个奇怪的错误，我不太确定原因。

这是我的代码块和我收到的错误图片。

'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函数中传递的导航器对象进行查看。

所以一般你想做某事。像：

在AppNavigator的_renderScene功能通导航对象：

<LoginIndexScreen nv={navigator} /> 

然后在LoginIndexScreen的_navigateToUserIndexScreen功能通过使用道具NV：

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

你也应该绑定功能。检查https://facebook.github.io/react/docs/reusable-components.html#no-autobinding