React-native: Undefined не является объектом (оценка this.props.navigation)

хотел бы воспользоваться вашей помощью. Я возился со стеком-навигатором в react-native, но я некоторое время застрял на ошибке, упомянутой в заголовке. Я сделал код самым простым, каким только мог, но до сих пор не могу понять ошибку. Я предполагаю, что это что-то о доступности this.props, но я пока этого не понимаю.

Вот код:

App.js

import React, {Component} from 'react';
import {AppRegistry,Animated,DeviceEventEmitter,Text,View,StyleSheet,TouchableHighlight,TouchableOpacity,TextInput,Button,Image,Dimensions} from 'react-native';
import {StackNavigator} from '/Users/amitnelinger/Desktop/MobileProjects/newProj/node_modules/react-navigation'




const App = (props) => {
    return(
     const { navigate } = props.navigation;
     <View>
                <Button 
                    onPress={() => navigate('song')} 
                    title = "MotherFucker Jones"
                />  

      </View>
    );
 }

App.navigationOptions = {
    title: 'Home screen',
};

export default App

index.ios.js

import React, {Component} from 'react';
import {AppRegistry,Animated,DeviceEventEmitter,Text,View,StyleSheet,TouchableHighlight,TouchableOpacity,TextInput,Button,Image,Dimensions} from 'react-native';

import App from '/Users/amitnelinger/Desktop/MobileProjects/newProj/app/components/App.js'
import song from '/Users/amitnelinger/Desktop/MobileProjects/newProj/app/components/song.js'
import {StackNavigator} from '/Users/amitnelinger/Desktop/MobileProjects/newProj/node_modules/react-navigation'

export default class newProj extends Component{

    render(){
        const { navigation } = this.props;

        return(
            <App navigation = { navigation } />
        );
    }
}

const simpleApp = StackNavigator({
    Home: {screen: App},
    song: {screen: song}
});

AppRegistry.registerComponent('newProj',() => newProj)

react-native navigation stack-navigator
person Amit Nelinger    schedule 10.04.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы не используете StackNavigator, вы просто передаете неопределенную навигационную опору. Поменяйте приложение с помощью StackNavigator, и это должно решить вашу проблему:

export default class newProj extends Component{

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

const simpleApp = StackNavigator({
    Home: {screen: App},
    song: {screen: song}
});
person Matt Aft    schedule 10.04.2018
comment
Идеальный! Большое спасибо, действительно работает. Очень признателен! - person Amit Nelinger; 10.04.2018

arrow_upward
0
arrow_downward

Мне кажется, вы не правильно вызываете навигацию. Полная поддержка для изменения навигации: this.props.navigation.navigate('song'). Попробуйте эту настройку

person David Yazzie    schedule 10.04.2018
comment
Эй, Дэвид, спасибо за ваш ответ! К сожалению, я уже пробовал это, и это не сработало - person Amit Nelinger; 10.04.2018