React Native导航道具在单独的文件中不起作用

Question

我试图在一个单独的文件中创建一个带有Auth功能和导航的登录屏幕，但导航总是出错。我试着传递道具，但没用。。。

你能帮帮我吗？

这是我的代码：

App.js

export default class App extends React.Component{
render(){
return(
<RootStack navigation={this.props.navigation} />
)
}

}

rootstack.js

const StackNavigator = createStackNavigator({
Login: {
screen: login,
navigationOptions: {
headerShown: false,
}
},
Home: {
screen: TaskScreen,
navigationOptions: {
headerShown: false,
}
}
})
export default createAppContainer(StackNavigator);

Login.js

...
<Auth props={this.props}/>
...

auth.js

export function Auth() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const auth = (props) => {
fetch('http://192.168.178.26:8000/auth/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password })
})
.then(res => res.json())
.then(res => {
saveToken(res.token);
console.log(res.token);
props.navigation.navigate('Home'); # Here i get the error
})
.catch(error => console.log(error));
};
const saveToken = async (token) => {
await AsyncStorage.setItem('IN_Token', token)
};
...

你能帮帮我吗？

哦，对不起，我忘了添加错误消息：undefined不是对象(正在评估"props.navigation.anavigation"(

Answer 1

当您使用函数组件时，您应该将props作为参数传递给函数组件以访问它们

因此，在您的auth.js中，只需在函数的参数中发送props

导出函数Auth(props(｛

const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const auth = (props) => {
fetch('http://192.168.178.26:8000/auth/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password })
})
.then(res => res.json())
.then(res => {
saveToken(res.token);
console.log(res.token);
props.props.navigation.navigate('Home'); # Here i get the error
})
.catch(error => console.log(error));
};
const saveToken = async (token) => {
await AsyncStorage.setItem('IN_Token', token)
};

或

const auth = ({props}) => {
...
.then(res => res.json())
.then(res => {
saveToken(res.token);
console.log(res.token);
props.navigation.navigate('Home'); # Here i get the error
})

这应该有效！

Answer 2

您没有在Auth组件的顶部获得props，您需要在声明中获得props而不是在上面的函数中。

您应该像这样声明Authexport function Auth(props)

另一件事是：您正在传递Auth props={this.props}，所以Auth中的props对象可能是这样的：props.props.navigation。您可以使用排列运算符来避免此<Auth {...this.props}/>

这应该行得通。

你可以做的另一种方法是Auth函数向Login.js返回一个回调，在Login.js中进行导航。