_this2.props.navigator.push 不是函数答案

【问题标题】：_this2.props.navigator.push is not a function_this2.props.navigator.push 不是函数
【发布时间】：2020-09-15 03:29:36
【问题描述】：

我正在尝试在 React-Native 应用程序中使用 Navigator，但遇到了问题。

在应用程序的开头，我正在加载这个 LoginScreen 组件：

return <LoginScreen navigator={navigator}/>;

它有这个：

class LoginScreen extends React.Component {
  props: {
    navigator: Navigator;
  };
  render() {
    return (
          <F8Button
            style={styles.button}
            onPress={() => this.props.navigator.push({userFlow})}
            caption="Create Account"
          />
);}

我希望它指向 userFlow 组件。

我有一个名为 F8Navigator 的组件，它有：

    const {navigator} = this.refs;
    if (navigator && navigator.getCurrentRoutes().length > 1) {
      navigator.pop();
      return true;
    }

  renderScene: function(route, navigator) {
    if (route.userFlow) {
      return (
        <userFlow
          userFlow={route.userFlow}
          navigator={navigator}
        />
      )
    }

当我运行它并单击 F8Button 时，我得到：

_this2.props.navigator.push is not a function

我该如何解决这个问题？

【问题讨论】：

标签： react-native

【解决方案1】：

当我尝试在导航器中使用 tabview 时，我遇到了同样的问题。然后我在返回视图时添加了 {...this.props}，例如。

return <LoginScreen {...this.props}/>;

这也是我如何使用导航器的代码示例，希望对您有所帮助。

我创建了一个导航器类：

'use strict';

const React = require('React');
const Navigator = require('Navigator');
const LoginScreen = require('../login/LoginScreen');
const UserFlowScreen = require('../userFlow/UserFlowScreen');

class MyAppNavigator extends React.Component{
  constructor(props) {
    super(props);
  }

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

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

    switch (route.ident) {
      case "LoginScreen":
        return <LoginScreen {...globalNavigatorProps} />
      case "UserFlowScreen":
        return <UserFlowScreen {...globalNavigatorProps} />
      default:
        return <LoginScreen {...globalNavigatorProps} />
    }
  }

};

module.exports = MyAppNavigator;

然后在我的主视图中我调用我的导航器：

'use strict';

const React = require('React');
const {
  Text,
  View,
} = React;

const MyAppViewContainer = require('./common/MyAppViewContainer');
const MyAppNavigator = require('./common/MyAppNavigator');

class MyApp extends React.Component {

 constructor(props) {
   super(props);
 }

 render() {
   return (
     <MyAppViewContainer >
      <MyAppNavigator initialRoute={{ident: "LoginScreen"}} />
     </MyAppViewContainer >
   );
 }
};

module.exports = MyApp;

在我的登录屏幕中，我可以推送到 userFlowScreen：

'use strict';

const React = require('React');
const ReactNative = require('react-native');
const{
  Text,
  View,
  TouchableOpacity,
  Navigator,
} = ReactNative;

class LoginScreen extends React.Component {

 constructor(props) {
   super(props);
 }

 render() {
   return (
     <View>
       <TouchableOpacity onPress={() => this._pressRow()}>
         <Text>Login</Text>
       </TouchableOpacity>
     </View>
   );
 }

 _pressRow(){
   this.props.navigator.push({
     ident: "UserFlowScreen",
     sceneConfig: Navigator.SceneConfigs.FloatFromRight,
   });
  }
};

module.exports = LoginScreen;

【讨论】：

我用过这样的：return ( < ListScreen navigator={navigator} {...route.passProps} />); 是否要改成<ListScreen {...this.props}/>;？
@userashu19 可以保留为{...route.passProps}
但是如果我保持原样{...route.passProps} 那么为什么我会收到错误，因为 Undefined is not an object (evaluate 'this.props.navigator')跨度>

【解决方案2】：

你可以这样做：

componentDidMount () {
const {navigation} = this.props;
navigation.addListener ('willFocus', () =>
  // run function that updates the data on entering the screen
);
}

【讨论】：