Question

我想知道如何在不使用选项卡或堆栈导航的情况下浏览我的React Native应用。我想创建一个按钮，然后onPress直接导航到该页面。我正在使用https://www.npmjs.com/package/react-native-drawer尝试实现与createDrawerNavigator相同的功能。看起来很简单。但是，当我在DrawerScreen.js中尝试并单击该按钮进行导航时，出现了前面提到的错误。

我确实尝试过以下方法：

<TouchableOpacity onPress = {() => this.props.navigation.navigate('Home')}>
    <Text> Home </Text> 
</TouchableOpacity>

但是，我遇到了诸如"undefined is not an object (evaluating 'this.props.navigation.navigate')"之类的错误。

这是我的代码-

//file - App.js

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

import {createStackNavigator} from  'react-navigation';

import LoginScreen from './src/LoginScreen/LoginScreen.js';

import HomeScreen from './src/HomeScreen/HomeScreen.js';

import SignUpScreen from './src/SignUpScreen/SignUpScreen.js';

import {createDrawerNavigator} from 'react-navigation';

export default class App extends React.Component{
  render() {
    return(
    <AppStackNavigtor/>
    );
  }
}

const AppStackNavigtor = createStackNavigator ({
  Login: LoginScreen,
  SignUp: SignUpScreen,
  Home: HomeScreen,
})

// file - DrawerScreen.js


import React from 'react';

import { StyleSheet, Text, View, TouchableOpacity, StackNavigator} from 'react-native';

import HomeScreen from '../HomeScreen/HomeScreen';

import Drawer from 'react-native-drawer';

import {createDrawerNavigator} from 'react-navigation';

export default class DrawerScreen extends React.Component {
render () {
  return (

    <TouchableOpacity style = {{top: 100}} 
    onPress = {() => this.props.navigation.navigate('HomeScreen')}>
    <Text> Home </Text>
    </TouchableOpacity>

    );
  }
}

const style = StyleSheet.create({

})

Answer 1

我相信您应该使用withNavigation包装您的组件，以便能够使用withNavigation()中记录的this.props.navigation。

首先通过react-navigation从react-navigation导入并导出DrawerScreen，如下所示：

export default withNavigation(DrawerScreen)

Answer 2

您要声明您的导航器：

const AppStackNavigtor = createStackNavigator ({
  Login: LoginScreen,
  SignUp: SignUpScreen,
  Home: HomeScreen, // here you declare Home from HomeScreen class
})

您的导航应该是：

this.props.navigation.navigate('Home')

您可以像下面这样声明导航器，将HomeScreen置于导航功能中：

const AppStackNavigtor = createStackNavigator ({
  Login: LoginScreen,
  SignUp: SignUpScreen,
  HomeScreen: HomeScreen, // put this line or...
  HomeScreen, // or this one
})

如何在没有堆栈的情况下浏览React本机应用

2 个答案: