Javascript 如何在const类型视图中访问、发送道具-React Native？

我正在学习如何在不使用类扩展组件的情况下使用typescript创建API react native。 实际上，我不知道如何从const view访问道具并将其发送到另一个函数：

App.tsx

import React, {useState} from 'react';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import Navigator from './Components/Navigator';
import { Root } from 'native-base';
import * as Font from 'expo-font';
import AppLoading  from 'expo-app-loading';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import rootReducer from './Store/Reducers/Reducers';

const store = createStore(rootReducer);

export default class App extends React.Component {
  constructor(props) {
    super(props);
   this.state = { loading: true };
}

async componentDidMount() {
   await Font.loadAsync({
   Roboto: require('native-base/Fonts/Roboto.ttf'),
   Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
 });
 this.setState({ loading: false });
}

render(){
  if (this.state.loading) {
    return (
      <Root>
        <AppLoading />
      </Root>
    );
  }
  else {
    return (
      <Provider store={store}>
        <Root>
           <NavigationContainer>
             <Navigator/>
            </NavigationContainer>
        </Root>
      </Provider>          
    );
  }
 }
}

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack'
import Login from '../Views/Login'
import Home from '../Views/Home'

const Stack = createStackNavigator();

const Navigator= () =>{
  return (
        <Stack.Navigator>
            <Stack.Screen name="Login" component={Login}  options={{headerShown:false}}/>
            <Stack.Screen name="Home" component={Home} options={{title:'Home.'}}/>
        </Stack.Navigator>
  );
}

export default Navigator;

当我按下登录按钮时，我得到错误信息：

undefined不是对象（计算“\u this.props”）

---

您正在功能组件中使用

this.props

。它只在类组件中工作。在你的情况下，你能做的就是

const Login=(props)=>{

   const {navigation} = props; // add here 
   .....

   return( 
     <View>
        .....
        // change here, replace "this.props" to "props" only
       <Button onPress={()=> ValidateFields(userName, password, props)? navigation.navigate('Home') : Toast.show({
            text: resultLog})}> 
            <Text style={{color:'white'}}>Login</Text> 
        </Button>
     </View>
   );
}

const Login=（道具）=>{
const{navigation}=props；//在此处添加
.....
报税表（
.....
//在此处更改，将“this.props”替换为“props”
验证字段（用户名、密码、道具）？导航。导航（'Home'）：Toast.show({
文本：resultLog}）}>
登录
);
}

export const Auth={
    LoginUser,
}

interface IAuthData{
   nick : string,
   password : string
};

async function LoginUser(AuthData:IAuthData, props: any){
  try{
      console.log(props);
      let response = await fetch('http://localhost/user/Login/authentication', 
                                                                    {method: 'POST',
                                                                    headers: {
                                                                    Accept: 'application/json',
                                                                    'Content-Type': 'application/json'
                                                                    },
                                                                    body: JSON.stringify(AuthData)
      });

      let json = await response.json();      
      if(response.status==200){
          props.dispatch(//...code here);
      }
  }catch(err){
     console.error(err);
  }
}

const Login=(props)=>{

   const {navigation} = props; // add here 
   .....

   return( 
     <View>
        .....
        // change here, replace "this.props" to "props" only
       <Button onPress={()=> ValidateFields(userName, password, props)? navigation.navigate('Home') : Toast.show({
            text: resultLog})}> 
            <Text style={{color:'white'}}>Login</Text> 
        </Button>
     </View>
   );
}