I am trying to use Navigator within a React-Native app, but I am running into issues.
At the beginning of the app, I am loading this LoginScreen component:
return ;
it has this:
class LoginScreen extends React.Component { props: { navigator: Navigator; }; render() { return ( this.props.navigator.push({userFlow})} caption="Create Account" /> );}
I want it to lead to the userFlow component.
I have a component called F8Navigator, that has this:
const {navigator} = this.refs; if (navigator && navigator.getCurrentRoutes().length > 1) { navigator.pop(); return true; } renderScene: function(route, navigator) { if (route.userFlow) { return ( ) }
When I run this and click on the F8Button, I get:
_this2.props.navigator.push is not a function
How can I fix this?
I had that same problem when I tried to use a tabview with the navigator. Then I just added {...this.props} when I returned my view eg.
return ;
Here is also an example of my code on how I use the navigator hoping this can help you.
I created a navigator class:
'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 ( ({ ...route.sceneConfig || Navigator.SceneConfigs.FloatFromRight })} /> ); } _renderScene(route, navigator) { var globalNavigatorProps = { navigator } switch (route.ident) { case "LoginScreen": return case "UserFlowScreen": return default: return } } }; module.exports = MyAppNavigator;
Then in my main view I call my navigator:
'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 ( ); } }; module.exports = MyApp;
and in my Login screen I can just push to the 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 ( this._pressRow()}> Login ); } _pressRow(){ this.props.navigator.push({ ident: "UserFlowScreen", sceneConfig: Navigator.SceneConfigs.FloatFromRight, }); } }; module.exports = LoginScreen;
翻译