标签: react-navigation

我使用 const 来显示组件。现在，当我对 const 中的按钮使用反应导航时，我看到了这个错误：未定义不是一个对象（评估 '_this.props.navigation.navigate'）

我尝试将 navigation={this.props.navigation} 添加到按钮以允许导航，但没有奏效。

const WomenTab = () => (
    <View>
      <Button onPress={() => {
                        this.props.navigation.dispatch(StackActions.reset({
                          index: 0,
                          actions: [
                            NavigationActions.navigate({ routeName: 'Wallet' })
                          ],
                        }))
                      }}>
          <Text>Click</Text>
      </Button>
    <View>
);

库链接：http : //github.com/react-native-community/react-native-tab-view

我正在尝试为菜单徽标设置动画以在单击时旋转。当它向上旋转时，我成功地获得了旋转，但它在向下旋转时直接变为 0，而不是通过旋转动画。

这是我的组件：

import React from 'react';
import { TouchableOpacity, Animated } from 'react-native';
import PropTypes from 'prop-types';

import styles from './styles';

const TabIcon = ({
  route,
  renderIcon,
  onPress,
  focused,
  menuToggled,
  activeTintColor,
  inactiveTintColor,
}) => {
  const isMenuLogo = route.params && route.params.navigationDisabled;
  const animation = new Animated.Value(0);

  Animated.timing(animation, {
    toValue: menuToggled ? 1 : 0,
    duration: 200,
    useNativeDriver: true,
  }).start();

  const rotateInterpolate = animation.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '180deg'],
  });
  const animatedStyles = { transform: [{ rotate: rotateInterpolate }] …

我正在制作一个 react-native 移动应用程序，我有一个导航抽屉，上面有一个注销按钮。我知道如何从那里导航到登录屏幕，使用props.navigation.navigate('Login')，但问题是如果用户这样做，他们仍然可以从登录屏幕打开抽屉并导航回其他屏幕之一，或者按后退按钮在安卓上。

如果用户来自另一个页面，我想我可以在登录屏幕上进行检查，然后禁用打开抽屉按钮，但这似乎有点麻烦。我想知道是否有正确的方法可以做到这一点，也许是在登录时重置堆栈，我不确定。

我有3个屏幕上StackNavigator：MainSearch，MonsterPage，ItemPage。我想堆叠MonsterPage和ItemPage多次（从MonsterPage你可以去，ItemPage反之亦然）

可以实例化屏幕吗？

const AppNavigator = createStackNavigator(
    {
        Home: MainSearch,
        MonsterPage: MonsterPage,
        ItemPage: ItemPage
    },
    {
        initialRouteName: "Home"
    }
);

export default createAppContainer(AppNavigator);

我想要的是：

MainSearch -> ItemPage(1) -> MonsterPage(1) -> ItemPage(2) -> 等等...

或者

MainSearch -> MonsterPage(1) -> ItemPage(1) -> MonsterPage(2) -> 等等...

我得到的：

MainSearch -> MonsterPage(1) -> ItemPage(1) ->(返回) MonsterPage(1)

Gif 显示会发生什么

主搜索

onPress={() => { this.props.navigation.navigate(`${r._source.super_cat === 'monster' ? 'MonsterPage' : 'ItemPage'}`, …

我正在开发一个使用侧抽屉的 RN 应用程序。（RN 版本：0.59.8）

const DrawerNavigator = createDrawerNavigator(
    {
        Home: {
            screen: HomeScreen
        },
        Poems: {
            screen: PoemsScreen
        },
        Contest: {
            screen: ContestScreen
        },
        AboutMe: {
            screen: AboutMeScreen
        }
    },
    DrawerConfig
);

export default createAppContainer(DrawerNavigator);

使用的 react-navigation 版本是 3.11.0。在菜单中，多个子项指向同一个页面，即 ViewPager，但具有不同的参数（页面索引）。问题是以下方法都不起作用：

1. 尝试使用推送而不是导航（返回_this2.props.navigation.push is not a function）
2. 试图重置相应的堆栈。

const resetAction = StackActions.reset({
   index: 0,
   key: 'Poems',
   actions: [NavigationActions.navigate({ routeName: 'Poems' })]
})
this.props.navigation.dispatch(resetAction)

（也试过key: null）

任何帮助深表感谢！

我正在自学 React Native 并构建一个相当简单的应用程序，irMobile.

我已经设置了每个屏幕（以关于屏幕为例）

static navigationOptions = () => ({
  title: 'About'
})

在我的应用程序的主要组件中

const MainNavigator = createBottomTabNavigator({ About })
const StackNavigator = createStackNavigator({ MainNavigator })
const AppContainer = createAppContainer(StackNavigator)

然后在组件本身

  render() {
    return (
      <View style={styles.container}>
        <AppContainer />
      </View>
    )
  }

我的屏幕在底部呈现一个漂亮的导航栏，但标题中没有任何标题，只有一个空白区域。

我已经多次浏览文档，想看看我错过了什么，但我很难过。

如果我使用的检查中的iOS模拟器我可以选择的标题，它表明这是一个View在x: 0, y: 44同width: 375和height: 43.7，这样的东西是存在的我就是不能看到它。

我试过设置 aheaderStyle以{ backgroundColor: 'red' }查看我是否至少可以看到它，但没有。

但是，如果我更改StackNavigator将About屏幕放在那里MainNavigator，如下所示：

const …

问题总结

我在 React Navigation 中使用功能组件，并且正在使用我根据他们的文档创建的 NavigationService 组件中的 NavigationService.navigate 。我需要将参数传递给目标，我可以这样做，但我不知道如何在目标屏幕中检索参数。

我想我只需要在我的 NavigationService.js 文件中添加一些东西，但我不确定它应该是什么，而且我在他们的文档中找不到它。

代码

启动画面中的代码

import NavigationService from "~/app/services/NavigationService";
onPress={() => NavigationService.navigate("CompScreen", { comp })}

导航服务.js

import {
  NavigationActions,
  DrawerActions,
  StackActions
} from "react-navigation";

let navigator;

/**
 * @function setTopLevelNavigator
 * @param  {ref} navigatorRef
 */
function setTopLevelNavigator(navigatorRef) {
  navigator = navigatorRef;
}

/**
 * @function navigate
 * @param  {string} routeName
 * @param  {any} params
 */
function navigate(routeName, params) {
  navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params
    })
  );
}

/**
 * @function …

我尝试在 React Native 中创建标签导航。但是当我想导入import { createBottomTabNavigator } from 'react-navigation-tabs';. 我有以下错误：bundling failed: Error: Unable to resolve module `react-navigation-tabs` from `/Users/nicolasthibault/Desktop/RunApplication/Runenger/Views/NavigationReact.js`: Module `react-navigation-tabs` does not exist in the Haste module map。

我尝试了许多我发现的类似主题的命令，但它们中的任何一个都适用于我的情况。例如，我尝试了这些，但它不能解决我的问题。

1. Clear watchman watches: `watchman watch-del-all`. 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`. 3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.

谢谢你的帮助。

我如何使用这样的东西：

    /* Imports */
    import React from 'react';
    import { TouchableOpacity, StatusBar, View, Text, Linking } from 'react-native';
    import { Container, Header, Left, Body, Title, Button, List, ListItem, Content } from 'native-base';
    import { AntDesign, MaterialCommunityIcons, Entypo, MaterialIcons, FontAwesome } from '@app/utils/Icons';
    import { custom, responsive } from '@app/styles/config';
    import { withTheme} from '../../theme/themeProvider';
    import { styles } from '../../theme/theme';
    /* /Imports/ */

    class SettingsView extends React.Component {
      /* Navigation Options Like (Header, Title, Menu, Icon, Style) */
      static navigationOptions …

我正在使用 React Native 导航包中的顶部选项卡导航，该导航包是通过该createMaterialTopTabNavigator()函数创建的。默认情况下，标签栏上有一个框阴影，我想禁用它。这是我的标签屏幕配置代码：

const TabScreen = createMaterialTopTabNavigator(
  {
    "Test one": { screen: TestScreen1 },
    "Test two": { screen: TestScreen2 },
    "Test three": { screen: TestScreen3 },
  },
  {
    tabBarPosition: 'top',
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions: {
      upperCaseLabel: false,
      scrollEnabled: true,
      activeTintColor: '#000',
      inactiveTintColor: 'rgb(180, 180, 180)',
      pressColor: 'orange',
      style: {
        boxShadow: 'none',
        backgroundColor: '#fff',
        numberOfLines: 1,
      },
      tabStyle: {
        //
      },
      labelStyle: {
        fontSize: 16,
        textAlign: 'center',
      },
      indicatorStyle: {
        borderBottomColor: 'orange',
        borderBottomWidth: 4,
      },
    },
  } …