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

Question

我尝试在单独的文件中创建一个具有身份验证功能和导航的登录屏幕，但我总是在导航时遇到错误。我试图传递道具，但它不起作用...

你能帮帮我吗？

这是我的代码：

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.navigate'）

Answer 1

你不是在Auth组件的顶部获取props，你需要在声明中获取props，而不是在上面的函数中。

你应该这样声明 Auth export function Auth(props)

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

这应该有效。

你可以做的另一种方法，我更喜欢的是 Auth 函数 returns 回调 Login.js 并在 Login.js 中你做导航。

Answer 2

当您使用函数组件时，您应该将 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

            })

这应该有效！

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

React Native navigation props wont work i a seperate file

reactjs

react-native

react-props

react-navigation-stack