分类导航

程序问答发布时间：2022-06-01 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何在 const 类型视图中访问、发送道具 - React Native？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

开发过程中遇到如何在 const 类型视图中访问、发送道具 - React Native？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何在 const 类型视图中访问、发送道具 - React Native？的解决方法建议，希望对你解决如何在 const 类型视图中访问、发送道具 - React Native？有所启发或帮助；

我正在学习如何在不使用类扩展组件的情况下使用打字稿创建 API 反应本机。实际上，我不知道如何从 const 视图访问和发送 props 到另一个函数：

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

Navigator.tsx

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;

Login.tsx（我正在尝试发送关于 button 功能的道具...）

import React,{useStatE} from 'react'
import {Text,TexTinput,VIEw,Image } from 'react-native'
import {Button,Toast,Content} from 'native-base'
import {Auth} from '../services/Auth/Authservice'

const Login=({navigation})=>{
   const [username,setUsername] =useState('');
   const [@R_607_5747@d,set@R_607_5747@d] =useState('');
   const [resultLog,setResultLog] = useState('');

   return( 
     <VIEw>
        <TexTinput placeholder="Username..." DefaultValue={usernamE} onChangeText={txt=> setUsername(txt)} />
        <TexTinput placeholder="@R_607_5747@d..." DefaultValue={@R_607_5747@D} onChangeText={txt=> set@R_607_5747@d(txt)}  secureTextEntry={truE}/>
        <button priMary style={{wIDth:115,height:45,marginBottom:15}} onPress={()=> ValIDateFIElds(username,@R_607_5747@d,this.props)? navigation.navigate('Home') : Toast.show({
            text: resultLog})}> 
            <Text style={{Color:'white'}}>Login</Text> 
        </button>
        <button bordered  onPress={()=> navigation.navigate('Register')}> 
            <Text style={{Color:'red'}}>Register </Text> 
        </button>
     </VIEw>
   );
}

async function ValIDateFIElds(username:string,@R_607_5747@d:string,props:any){
   await Auth.LoginUser({nick:username,@R_607_5747@d: @R_607_5747@D},props);
   //...
}

export default Login;

Authservice.tsx（我正在尝试接收 props 并在使用后调度 redux..。）

export const Auth={
    LoginUser,}

interface IAuthData{
   nick : String,@R_607_5747@d : 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);
  }
}

当我按下登录按钮时，出现错误：

undefined 不是一个对象（评估 '_this.props'）

解决方法

您在函数组件中使用了 this.props。它只适用于类组件。在你的情况下，你可以做的是

const Login=(props)=>{

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

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