Undefined не является объектом для реагирующей навигации - PullRequest
Новая
       39

Undefined не является объектом для реагирующей навигации

0 голосов
/ 29 мая 2019

У меня есть два компонента для моего проекта, и я прошел все шаги для реагирования навигации следующим образом: 

// App.js
import React from 'react';
import Main from './app/componenets/Main'
import details from './app/componenets/details'
import { createStackNavigator, createAppContainer } from 'react-navigation'

const mainNavigator = createStackNavigator(
  {
    MainScreen: Main,
    detailsScreen: details,
  },
  {
   initialRouteName :'MainScreen'
  }
);
const AppContainer = createAppContainer(mainNavigator);

export default class App extends React.Component{

render() {
return(
  <AppContainer />
);
}
}

Тогда у меня есть мой Main.js, у меня есть следующий метод: 

    import React from 'react';
import {
    StyleSheet ,
     Text,
     View, 
    } from 'react-native'
import Note from './Note'
import detail from './details'
import { createStackNavigator, createAppContainer } from "react-navigation";


export default class Main extends React.Component {

  static navigationOptions = {
    title: 'To do list',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
  };

  constructor(props){
    super(props);
    this.state = {
      noteArray: [],
      noteText: ''
    }
  }

render() {
    let notes = this.state.noteArray.map((val,key) => {
      return <Note key={key} keyval={key} val={val}
      goToDetailPage= {() => this.goToNoteDetail(key)} />
    });
    const { navigation } = this.props;
    return(
        <View style={styles.container}>
            <View style={styles.footer}>
                <TextInput
                onChangeText={(noteText) => this.setState({noteText})}
                style={styles.textInput}
                placeholder='What is your next Task?'
                placeholderTextColor='white'
                underlineColorAndroid = 'transparent'
                >
                </TextInput>
            </View>
            <TouchableOpacity onPress={this.addNote.bind(this)} style={styles.addButton}>
                <Text style={styles.addButtonText}> + </Text>
            </TouchableOpacity>
        </View>
      );
    }
    //This method is declared in my Note.js
    goToNoteDetail=(key)=>{   
      this.props.navigation.navigate('detailsScreen')
      }
}

// Стили, которые я не опубликовал, чтобы быть краткими в коде здесь Но когда я пытаюсь сделать навигацию, я получаю эту ошибку: 'undefined - это не объект, а объект (оценка' this.props.val.date ') Нужно ли передавать реквизит таким образом? или я должен сделать что-нибудь еще? Я новичок в React родной и запутался!

Ответы [ 2 ]

0 голосов
/ 29 мая 2019

Просто удалите createAppContainer

const AppContainer = mainNavigator;

и скажите мне, с чем react-navigation вы работаете

0 голосов
/ 29 мая 2019

, чтобы получить доступ к this.props, сделайте функцию-стрелку или привязайте функцию в конструкторе. 

goToDetail=()=>{   
this.props.navigation.navigate('detailsScreen')
}
...