Question

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

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

var imageCount = 0;

function loadImage(onComplete) {
    imageCount++;

    var img = document.createElement("img");

    img.onerror = function () {
        // there was an error, so we're assuming there are no more images
        onComplete();
    };

    img.onload = function() {
        // the image has loaded - add it to the DOM?
        // call this function again to load the next image
        loadImage(onComplete);
    };

    img.src = "ws-img/" + id + "-" + imageCount +".jpg";

    // cached images won't trigger onload
    if (img.complete) img.onload();
}}

loadImage(function() {
    alert("images have all loaded");
});

我的问题：当我尝试从Form.js到Router.js时，我得到了UNDEFINED不是一个对象（this2.props.navigation.navigate）。我相信我的错误是我需要将导航道具传递给我的文件。我的意思是，我应该把它放在哪里？

非常感谢！

Answer 1

您的Form不属于您的导航器，因此不会将navigation道具注入其中。这就是你获得undefined的原因。

在进入修复程序之前，首先应从Form.js

中删除此行

import {StackNavigator} from 'react-navigation';

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

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

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

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

在onPress中定义Login.js行动并将其传递给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的更多了解将变得更加清晰。现在，这足以让你继续前进。

将导航道具从父母传递给孩子

1 个答案: