Question

我正在尝试在应用程序屏幕中使用导航，而导航已导入到应用程序屏幕中。但显示错误。无法读取属性导航未定义。

App.js

import React from 'react';
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
import Navigation from './App/Components/Navigation';
import OneSignal from 'react-native-onesignal';
export default class App extends React.Component { 
  constructor(props){
    super(props);
    .........
  }  
   ..........
  onOpened(openResult) {
    const { navigate } = this.props.navigation;
    navigate('Screen2');
  }

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

Navigation.js-这是在App.js导入的导航组件，但显示错误-无法读取未定义的属性“ navigate” 我该如何解决这个问题。

感谢前进..............

Answer 1

我了解到您正在尝试将一个屏幕导航到另一个屏幕。

您可以尝试使用（react-native-navigation-stack） https://facebook.github.io/react-native/docs/navigation

npm install --save react-navigation-stack

创建Navigation.js

 import { createStackNavigator,createAppContainer } from 'react-navigation'
import Login from './Login'
 import SignUp from './SignUp'
 var AppNavigator = createStackNavigator({
      Login: {
        screen: Login,
        navigationOptions: {
          header: null
        }
      },
    SignUp: {
            screen: SignUp,
            navigationOptions: {
              header: null
            }
          },
    },
    {
       initialRouteName: 'Login',
     })
    export default NavigateStack = createAppContainer(AppNavigator);

在App.js中

import React, {Component} from 'react';
import Navigation from './Navigation' 
export default class App extends Component { 
        render()
        {
                return ( <Navigation /> );
        }
 }

在login.js中

signup = () =>
{ 
    this.props.navigation.navigate('SignUp') 
}

如何从导入的子组件（导航组件）在应用程序上使用导航？

1 个答案: