React Native报TypeError: _this.props.loginState is not a function问题求助

核心问题1：Drawer.Screen传参方式错误 #

React Navigation的Drawer.Screen不支持直接在标签上写自定义属性传递给子组件，你写的loginState={changeLoginState}不会传递到Login组件内，导致this.props.loginState为undefined，调用时自然报「不是函数」的错误。

核心问题2：登录状态不是响应式状态 #

你在App组件内定义的let isLoggedIn = false是普通JS变量，修改它不会触发App组件重渲染，就算成功调用了状态修改方法，界面也不会自动切换。

修正后App.js完整代码 #

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer'
import Account from './src/screens/account';
import Login from './src/screens/Login'

export default function App(){
    // 用useState创建响应式状态，修改会触发组件重渲染
    const [isLoggedIn, setIsLoggedIn] = React.useState(false)
    const Drawer = createDrawerNavigator();

    return(
        <NavigationContainer>
          <Drawer.Navigator initialRouteName="Home">
            {isLoggedIn ? (
              <Drawer.Screen name="Account" component={Account}/>
            ) : (
              <Drawer.Screen name="Inloggen">
                {/* 用回调渲染的方式传递自定义props */}
                {props => <Login {...props} loginState={setIsLoggedIn} />}
              </Drawer.Screen>
            )}
          </Drawer.Navigator>
        </NavigationContainer>
    )
}

修正后Login.js完整代码 #

import * as React from 'react';
import { Component } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

class Login extends Component {
    changeLoginState = () => {
        this.props.loginState(true)
    }

    render(){
        return (
            {/* RN默认flex布局，用flex:1撑满全屏，不要用web端的vh单位 */}
            <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                <TouchableOpacity style={{backgroundColor: 'red', paddingVertical:12, paddingHorizontal:24}} onPress={this.changeLoginState}>
                  {/* RN所有文本必须包裹在Text组件内 */}
                  <Text style={{color: 'white', fontSize:16}}>Login</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

export default Login

其他优化建议 #

• 你原代码里导入的createAppContainer、RootNavigator、PropTypes、getFocusedRouteNameFromRoute都没有用到，可以直接删除减少冗余
• 后续业务逻辑复杂后可以把登录状态放到React Context中全局管理，避免多层组件传参
• Login组件如果没有特殊逻辑可以改成函数式组件，代码更简洁

内容的提问来源于stack exchange，提问作者Bjop