Question

我正在尝试在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

我该如何解决这个问题？

Answer 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;

Answer 2

您可以使用以下方法做到这一点：

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

_this2.props.navigator.push不是一个函数

2 个答案: