我想通过this.props.navigation.navigate('Second Screen')
从一个屏幕导航到另一个屏幕,但道具中不包含属性“ navigation”。得到错误:
属性'navigation'在类型'Readonly <{}>和Readonly <{children?上不存在:ReactNode; }>'
import React, { Component } from "react";
import styles from "./style";
import { Keyboard, Text, View, TextInput, TouchableWithoutFeedback, KeyboardAvoidingView } from 'react-native';
import { Button } from 'react-native-elements';
export default class SignInScreen extends Component {
render() {
return (
<KeyboardAvoidingView style={styles.containerView} behavior="padding">
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.loginScreenContainer}>
<View style={styles.loginFormView}>
<Text style={styles.logoText}>Book Market</Text>
<TextInput placeholder="Email" placeholderTextColor="#c4c3cb" style={styles.loginFormTextInput} />
<TextInput placeholder="Password" placeholderTextColor="#c4c3cb" style={styles.loginFormTextInput} secureTextEntry={true} />
<Button
buttonStyle={styles.loginButton}
onPress={this.props.navigation.navigate('Home')}
title="Login"
/>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
}
}
答案 0 :(得分:1)
您只能通过父元素访问它。将导航作为道具传递给孩子使用
例如:
<Child navigation={this.props.navigation} />
答案 1 :(得分:1)
您可以执行建议的操作,将导航道具向下传递到目标组件
例如:
[302, OI]
[303, N2]
[304, N2.5]
或者您可以通过反义词使用<TargetComponent navigation={this.props.navigation} />
HOC。
例如:
withNavigation
希望有帮助。
答案 2 :(得分:0)
好的,我找到了解决方案。首先,我需要更改班级的扩展,例如
export default class SignInScreen extends Component<{navigation: any}>
然后更改onPress操作:
<Button
buttonStyle={styles.loginButton}
onPress={() => this.onSignInPress()}
title="Login"
/>
private onSignInPress() {
this.props.navigation.navigate('Home');
}
答案 3 :(得分:0)
我知道这是一个古老的问题,但是由于至少对于那些使用EXPO托管方法的人来说,未定义 navigation 属性的问题仍然存在,因此我希望写出自己的解决方案以节省某人的一天。
搜索了几个小时后,我找不到解决此错误的方法,没有找到向 this.props 添加 navigation 属性的方法。最后,我通过使用 NavigationContext 这样的方式解决了这个问题:
<NavigationContainer>
<NavigationContext.Provider>
<Stack.Navigator>
...
</Stack.Navigator>
</NavigationContext.Provider>
</NavigationContainer>
然后在消费者中获得导航:
<NavigationContext.Consumer>
{navigation => {
return (
<Button onPress={() => this.onButtonPress(navigation)} />
);
}}
</NavigationContext.Consumer>
最后:
onButtonPress(navigation) {
try {
navigation.navigate(RouteNames.FORGOTTEN_PASSWORD_SCREEN);
} catch (e) {
this.setState({ errors: [e.message] });
}
}