将导航道具从父级传递给子级

Question

我知道这个问题已经被回答了一千次了，我就是无法让它发挥作用。我是 Javascript 的新手。在此先感谢您的帮助！

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './src/Components/Login/Login.js'
import {StackNavigator, TabNavigator} from 'react-navigation'
import Signup from './src/Components/Signup/Signup.js'
import Router from './src/Components/BodyPages/Router.js'
import Form from './src/Components/Form/Form.js'

const RootStack = StackNavigator(
 {
   Home: {
     screen: Login,
   },
   Signup: {
     screen: Signup,
   },
   Router: {
     screen: Router,
   },
 },
 {
   initialRouteName: 'Home',
   headerMode:'none',
 }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

import React from 'react';
import { StyleSheet,TouchableOpacity, Text, View} from 'react-native';
import Logo from '../Logo/Logo.js'
import Form from '../Form/Form.js'
import styles from './Login.styles.js'
//onPress={alert:('ok');}
export default class Login extends React.Component {
render()
{
  return(
    <View style= {styles.container}>
    <Logo />
    <Form type= 'Ingresar' type2 = '¡Ingresar con Facebook!' />
    <View style= {styles.signUpView}>
    <Text style= {styles.signUpText}>Todavia no se encuentra registrado?</Text>
    <TouchableOpacity onPress = {() => this.props.navigation.navigate('Signup')}><Text style= {styles.signUpTextBolded}>Registrese!</Text></TouchableOpacity>
    </View>
    <View style= {styles.olvidoView}>
    <TouchableOpacity><Text style= {styles.signUpText}>Olvido su contraseña?</Text></TouchableOpacity>
    </View>
    </View>
    )
}
}

import React from 'react';
import { StyleSheet, TouchableOpacity, TextInput, Text, View } from 'react-native';
import styles from './From.styles.js'
import {StackNavigator} from 'react-navigation';


export default class Form extends React.Component
{
  render()
  {
    return (

      <View style={styles.container}>
            <TextInput style ={styles.input}
            placeholder = 'E-Mail'
            placeholderTextColor="rgba(0,0,0,0.3)"
            keyboardType="email-address"
            underlineColorAndroid='rgba(0,0,0,0)'
            onSubmitEditing={()=> this.contraseña.focus()} />

            <TextInput style ={styles.input}
            placeholder = 'Contraseña'
            placeholderTextColor="rgba(0,0,0,0.3)"
            underlineColorAndroid='rgba(0,0,0,0)'
            ref={(input) => this.contraseña = input}
            secureTextEntry = {true} />

            <TouchableOpacity onPress = {() => this.props.navigation.navigate('Router')} style={styles.Button}>
             <Text style={styles.buttonText}>{this.props.type}</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.Button2}>
            <Text style={styles.buttonText}>{this.props.type2}</Text>
          </TouchableOpacity>


          </View>
      );
  }
}

我的问题：当我尝试从 Form.js 到 Router.js 时，我得到 UNDEFINED IS NOT AN OBJECT (this2.props.navigation.navigate)。我相信我的错误是我需要将导航道具传递给我的文件。我的意思是，我应该把什么放在哪里？

非常感谢！

Answer 1

您的 Form 不是导航器的一部分，因此不会将 navigation 道具注入其中。这就是为什么你得到 undefined.

在进行修复之前，首先您应该从 Form.js:

中删除这一行

import {StackNavigator} from 'react-navigation';

它什么都不做。我的猜测是您认为导入它会以某种方式让您访问 navigation 道具，但这是不正确的。 react-navigation 用作 HOC（高阶组件）并将 navigation 属性注入到您在其中定义的屏幕中。

现在要进行修复，您有两种简单的方法来处理此问题：

将您的 navigation 道具传递到 Login.js 中的 Form 组件中：

<Form
  type='Ingresar'
  type2='¡Ingresar con Facebook!'
  navigation={this.props.navigation}
/>

在 Login.js 中定义您的 onPress 操作并将其传递到 Form.js:

// Login.js
<Form
  type='Ingresar'
  type2='¡Ingresar con Facebook!'
  navigationAction={() => this.props.navigation.navigate('Router')}
/>

// Form.js
<TouchableOpacity
  onPress={this.props.navigationAction}
  style={styles.Button}
>
  <Text style={styles.buttonText}>{this.props.type}</Text>
</TouchableOpacity>

进入其他解决方案或者为什么一个比另一个更好将是一个完全不同的讨论，并且随着您对 JavaScript 和 React 的了解更多，将会变得更加清晰。现在，这应该足以让您继续前进。

将导航道具从父级传递给子级

Passing down navigation props from parent to child

navigator

react-native