时间戳

首页 > 解决方案 > 如何从导入的子组件（导航组件）在应用程序中使用导航？

react-native - 如何从导入的子组件（导航组件）在应用程序中使用导航？

问题描述

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

应用程序.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 中导入的导航组件，但它显示错误 - 无法读取未定义的属性“导航”我该如何解决这个问题。

谢谢提前........

标签： react-native

解决方案

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

您可以尝试使用（ 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') 
}

推荐阅读