我正在尝试在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
我该如何解决这个问题?
答案 0 :(得分:2)
当我尝试将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;
答案 1 :(得分:0)
您可以使用以下方法做到这一点:
componentDidMount () {
const {navigation} = this.props;
navigation.addListener ('willFocus', () =>
// run function that updates the data on entering the screen
);
}