标签: stack-navigator

在我的应用程序需要抽屉导航,我使用示例代码此.我已将所有内容集成到我的应用程序中,但收到以下错误

undefined不是函数(评估'(0,_reactNavigation.stacknavigator)')

并安装了这个.

npm install react-navigation --save

但不知道为什么会出现这个错误,所以请指导我如何解决这个问题.

这是我的app.js.

import React, { Component } from 'react';
import { StyleSheet , Platform , View , Text , Image , 
         TouchableOpacity , YellowBox } from 'react-native';
import { DrawerNavigator, StackNavigator } from 'react-navigation';

class NavigationDrawerStructure extends Component {
  //Structure for the navigatin Drawer
  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */} …

我有几个屏幕可以一一浏览。屏幕1->屏幕2-屏幕3->屏幕4-首页

我想要的是当我回家时，应该清除以前的导航历史记录，并且后退按钮不应该转到屏幕 4 的最后一个导航屏幕。目前，当我在主屏幕上按后退按钮时，它会将我带回堆栈中的最后一个路由是 screen4。我使用了下面的代码。它给我错误没有定义路由或关键主页。我已经在 Screens 类中定义的。任何帮助，将不胜感激。

const resetAction = NavigationActions.reset({
  index: 0,                       
  actions: [NavigationActions.navigate({ routeName: 'Home' })],
});

onPress={() =>  this.props.navigation.dispatch(resetAction)}

我stackNavigator用于在屏幕之间导航.我componentDidMount()在第二个活动中正在调用两个API .当我第一次加载它时,它会成功加载.然后我按回按钮返回第一个活动.然后,如果我再次进行第二次活动,则不会调用API,我会收到渲染错误.我无法找到任何解决方案.任何建议,将不胜感激.

undefined 无法@react-navigation/native从App.js以下位置解析模块：在项目中找不到 @react-navigation/native。

如果您确定该模块存在，请尝试以下步骤：

 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
- node_modules\react-native\Libraries\Utilities\HMRClient.js:307:41 in showCompileError
- node_modules\react-native\Libraries\Utilities\HMRClient.js:228:26 in client.on$argument_1
- node_modules\eventemitter3\index.js:181:39 in emit
- node_modules\metro\src\lib\bundle-modules\WebSocketHMRClient.js:80:20 in _ws.onmessage
- node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\WebSocket\WebSocket.js:232:27 in _eventEmitter.addListener$argument_1
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 …

我正在使用react-navigation和 stack-navigator 来管理我的屏幕。

我正在使用的平台：

• 安卓
• 反应本机：0.47.1
• 反应导航：1.0.0-beta.11
• 模拟器和设备

我有一个屏幕，它充当模态形式，但它实际上是一个全屏。为什么“作为模态形式”的部分很重要？那是因为它是一种带有一些选项和透明背景颜色的模态菜单。

这是我的期望：

但我得到的是：

如您所见，在第二个示例中，背景颜色被完全替换，或者之前加载的组件被卸载，因此我想要达到的效果丢失了。 这个想法是能够像任何其他屏幕一样导航到这个屏幕。

如果使用 react-navigation 无法完成，我可以采取什么其他方式来完成？

该组件执行操作（redux），因为它是一个跨应用程序组件并在内部封装了许多机制和逻辑，这就是为什么我不能将它用作PureComponent使用此组件的中继。至少，使这个组件成为 PureComponent 将迫使我在许多其他组件中复制许多机制和逻辑。

为了这个问题，也为了避免问题太大，两个屏幕的风格完全相同，但推动的一个StackNavigation取代了backgroundColor，或者卸载了以前的屏幕。

这是我到目前为止所拥有的：

//PlaylistSelector.js
render() {
  //Just a full size empty screen to check and avoid bugs
  //Using red instead of transparent, works

  return (
    <View style={{ flex: 1, backgroundColor: 'transparent' }}>
    </View>
  );
}

//Navigator.js
import { StackNavigator } from 'react-navigation';

import Album from './Album'; //This is …

我想隐藏标题,因为我已经在代码中设置了样式工具栏:

import {createStackNavigator}
from 'react-navigation'
const AppStackNavigator = createStackNavigator ({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
})
class App extends Component {
render() {
  return (
  <AppStackNavigator initialRouteName='Home'/>`<br>
  );
  }
}
export default App;

我应该在代码中添加什么？

如何从 TabNavigator 中隐藏某些 TabBar 项目。是否有某个TabBarOptions选项具有visible这样的键（真/假）？

const Tabs = TabNavigator({
  Home: {
    screen: Home
  },
  Profile: {
    screen: Thanks,
    tabBarOptions: {
      visible: false
    },
  },
  More: {
    screen: More
  },
})

我想从DrawerNav导航回登录.在函数内使用alert('Alert')就可以了.

我有一个带Login和DrawerNav的StackNavigator

const MyStackNavigator = StackNavigator({
  Login : { screen : Login },
  DrawerNav : { screen : DrawerNav }
  }, {
    navigationOptions : { header : false }
  }
);

从登录我可以导航到我的主屏幕DrawerNav使用

_login = () => {
  this.props.navigation.navigate('DrawerNav');
}

DrawerNav里面是DrawerNavigator(显然)

const MyDrawerNavigator = DrawerNavigator({
    ... screens ...
  }, {
    initialRouteName : '',
    contentComponent : CustomContent,
    drawerOpenRoute : 'DrawerOpen',
    drawerCloseRoute : 'DrawerClose',
    drawerToggleRoute : 'DrawerToggle'
  }
);

const CustomContent = (props) => (
    <View>
      <DrawerItems {...props} />
      <TouchableOpacity
        onPress={ this._logout }> …

我在使用react-native应用程序时遇到了一些麻烦.我无法弄清楚如何跨屏幕传递数据.

我意识到还有其他类似的问题已在SO上得到解答,但解决方案并不适用于我.

我正在使用StackNavigator.这是我在我的App.js文件中的设置.

export default SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Categories: { screen: CategoriesScreen }, // send from here
    Category: { screen: CategoryScreen }      // to here
});

我有一个TouchableHighlight组件,其中有一个onPress事件将导航到所需的屏幕.这是在我的Categories.js文件/屏幕上.

<TouchableHighlight onPress={(id) => {
    const { navigate } = this.props.navigation;
    navigate('Category', { category: id });
}}>
    <Text>{name}</Text>
</TouchableHighlight>

当我单击该元素时,屏幕确实切换到category,但它无法发送props数据.

因此,当我检查Category屏幕中的数据时,它返回undefined.我尝试了以下方法:

this.props.category
this.props.navigation.state.category;
this.props.navigation.state.params.category

我究竟如何访问我在navigate方法中传递的数据？

navigate('Category', { category: id …

反应导航 5

我在 TabNavigator 内部构建了一个 StackNavigator，并且主屏幕和其他屏幕之间的导航正在工作。但问题是，当我从 Tab2 移动到 Tab1 时，我希望 Tab1 总是显示我 StackNavigator 的第一个屏幕。

tab1
   -> Stack
        -screen1
        -screen2
tab2

我在 screen2 上，然后移到 tab2 然后我移回 Tab1 我想总是显示 screen1。

我尝试使用

OnTabPress({navigation})=>{
    navigation.navigate("stackName",{
     screen: "screen1"
   }).
}

它的工作，但它首先显示我 screen2 然后导航到 screen1。有没有其他解决方案。 https://snack.expo.io/@usamasomy/groaning-donut