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

【问题标题】：React Native navigation props wont work i a seperate fileReact Native 导航道具在单独的文件中不起作用
【发布时间】：2020-07-28 09:13:31
【问题描述】：

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

你能帮帮我吗？

这是我的代码：

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);

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

【问题讨论】：

嗨@Léon Zimmermann，错误是否说明了“未定义”的导航？如果可能的话，请您详细说明您遇到的错误
错误是什么？错误在哪里

标签： reactjs react-native react-props react-navigation-stack

【解决方案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

            })

这应该可行！

【讨论】：

【解决方案2】：

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

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

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

这应该可行。

您可以做的另一种我更喜欢的方法是 Auth 函数返回一个回调到 Login.js 并在 Login.js 中进行导航。

【讨论】：

尝试在 Login.js 中执行 <Auth {...this.props} />，然后执行 export function Auth (props)