标签: react-navigation

我在选项卡导航器中有一个嵌套的堆栈导航器，如下所示：

const MainNavigator = createBottomTabNavigator({
  BookmarksList: createStackNavigator({
    BookmarkList: { screen: BookmarkList },
    UpdateBookmark: { screen: UpdateForm }
  }),
  NewBookmark: createStackNavigator({
    NewBookmark: { screen: NewBookmarkScreen }
  })
});

当我为 设置 navigationOptions 标题文本时BookmarkList，它只会更改标题文本，而不会更改选项卡文本。

例如，我已将BookmarkList标题设置为My Bookmarks.

class BookmarkList extends Component {
  static navigationOptions = {
    title: 'My Bookmarks'
  };    
}

这会反映在标题文本中，但不会反映在选项卡文本中，它仍然表示BookmarkList（以红色圈出）：

如何让标题和标签文本更改为相同的文本？

tldr; 通过 navigationOptions 自定义标题仅更改标题文本，但不会更改选项卡导航器内嵌套堆栈导航器中的选项卡文本。如何更改标题和标签文本？

嗨，我正在尝试创建一个堆栈导航来导航用户的个人资料页面。例如，用户转到 Jake 的个人资料，然后从该个人资料中点击 Ellen 的个人资料链接，然后转到那里，然后再转到 Tom 的个人资料等等......就像 Instagram 个人资料导航一样。

你认为这可以通过反应导航和反应原生来实现吗？

我有一个使用Ignite CLI. 我正在尝试将 TabNavigator 与 React Navigation 结合使用，但我似乎无法弄清楚如何将数据从一个屏幕传递到另一个屏幕。我见过的所有示例通常都显示了如何在点击按钮并使用该onPress功能时传递数据，但在我的情况下，我需要/想要在我实际点击其中一个选项卡按钮时传递数据，但我还没有找到有关如何执行此操作的解释，至少是我理解的解释。

我有两个用户将与之交互的屏幕SearchScreen和WatchScreen。这两个屏幕由AppNavigation.js文件中的 TabNavigator 控制。所以总共有 3 个文件AppNavigation.js，SearchScreen.js和WatchScreen.js.

AppNavigation.js

import { StackNavigator,TabNavigator } from 'react-navigation'
import SearchScreen from '../Containers/SearchScreen'
import WatchScreen from '../Containers/WatchScreen'
import SearchWatch from '../Containers/SearchWatch'
import LaunchScreen from '../Containers/LaunchScreen'
import styles from './Styles/NavigationStyles'

const PrimaryNav = TabNavigator({
  Search: { screen: SearchScreen },
  Watch: { screen: WatchScreen }
}, {
  initialRouteName: 'Search',
  lazy: true,

})
export default PrimaryNav …

我正在尝试在同一屏幕的不同屏幕之间创建滑动导航 StackNavigator

当我设置swipeEnabled:true时navigationOptions，我的应用程序宁愿在不同的选项卡之间导航。

我宁愿想从同一组内浏览Screen A到Screen B的例子。

我怎样才能做到这一点？

在反应导航抽屉菜单中。我想显示处于我的主要组件状态的用户名“John Doe” 我'Router'如何将 CustomDrawerContentComponent 传递给它。

额外信息：我从 componentDidMount 中的 AsyncStorage 获取此名称

这是我的代码

export default class Router extends Component {
  constructor(props) {
    super(props);
    this.state = {
      employeeName: "John Doe" //<-----How to pass this name to CustomDrawerContentComponent????
    };
  }

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

const MyApp = DrawerNavigator(
  {
    Home: {
      screen: Home
    },
    History: {
      screen: History
    },
    AddDetails: {
      screen: AddDetails
    }
  },
  {
    initialRouteName: "Home",
    drawerPosition: "left",
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: "DrawerOpen",
    drawerCloseRoute: "DrawerClose",
    drawerToggleRoute: "DrawerToggle",
    contentOptions: …

我正在使用 react-navigation 在屏幕之间导航。
在 ios 中它显示在中心并正常工作，但在 android 中它显示左侧和后退按钮和标题之间的空间。

我想在android上删除后退按钮和标题之间的空间。

我的代码

class Detail extends Component {
    .
    .
    .
    static navigationOptions = ({ navigation }) => {
        const {state} = navigation;
        return {
            headerTitle: "title",
            headerStyle: {
                borderBottomColor: 'transparent',
                borderBottomWidth: 0,
                backgroundColor: 'transparent',

                elevation: 0 ,
                shadowOpacity: 0,
                shadowColor: 'transparent',
                shadowRadius: 0,
                shadowOffset: {
                    width: 0,
                    height: 0
                }
            },
            headerTitleStyle: {
              color: 'white',
              width: width-72,
            },
            headerBackTitleStyle: {
              color: 'white',
            },
            headerTintColor: 'white',
            headerBackground: (
                <LinearGradient
                    colors={[MyConstants.colorNavbarStart, MyConstants.colorNavbarEnd]}
                    style={{ flex: …

我有这个函数，当一个<TouchableWithoutFeedback>区域被按下时会被执行：

navigateToRentable = () => {
    console.log('in navigateToRentable');

    this.props
     .navigation
     .dispatch(StackActions.reset({
       index: 0,
       actions: [
         NavigationActions.navigate({
           routeName: 'Rent',
           actions: [
              NavigationActions.navigate({
               routeName: 'Rentable',
             }),
           ]
         }),
       ],
     }))
}

我in navigateToRentable在控制台中看到，所以我知道该方法正在触发，但没有其他任何反应 - 控制台中没有其他输出。

这是我的导航结构：

CameraNavigator.js

import React from 'react';
import { StyleSheet, Text, View, Alert, Permissions, Linking, TouchableOpacity, Platform, ImageStore, Dimensions } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import RentScreenNavigator from './RentScreenNavigator';
import RentScreen from '../pages/RentScreen';
import CameraScreen from '../pages/CameraScreen';
import RentableScreen from '../pages/RentableScreen'; …

我想在顶部创建一个标题，每个屏幕的标题和右侧的按钮在反应导航 3.x 中打开抽屉

在下面的代码中，标题没有显示。

//用当前代码更新

  import React, { Component } from 'react';
import { Button } from 'react-native';
import {
  createStackNavigator,
  createDrawerNavigator,
  createAppContainer
} from 'react-navigation';

import MyHomeScreen from './components/HomeScreen';
import MyNotificationsScreen from './components/ProfileScreen';

const MyDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: MyHomeScreen
    },
    Notifications: {
      screen: MyNotificationsScreen
    }
  },
  {
    initialRouteName: 'Home',
    navigationOptions: navigationOptionsHeader
  }
);

const navigationOptionsHeader = ({ navigation }) => {
  return {
    headerTitle: 'MY Home',
    headerRight: (
      <Button
        onPress={() => navigation.toggleDrawer()}
        title="Info"
        color="#222"
      />
    ) …

我有一个反应母语与应用打字稿即不使用世博会。在 iOS 中运行时，在闪屏后出现以下错误。我知道这可能与react-navigation正在使用的事实有关，react-native-gesture-handler但它也包含在我的应用程序中并已链接。也可能是因为缺少 typescript 类型，但添加@types/react-navigation也无济于事。

[error][tid:com.facebook.react.JavaScript] TypeError: undefined is not an object (evaluating 'this._callListeners.bind')

This error is located at:
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:79)
    in RCTView (at View.js:45)
    in View (at Transitioner.js:215)
    in Transitioner (at StackView.js:22)
    in StackView (created by Navigator)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
    in NavigationContainer (at App.tsx:69)
    in Provider (at App.tsx:68)
    in App (at renderApplication.js:34)
    in RCTView (at View.js:45) …

我正在尝试将 params 传递到一个新屏幕，并像这里提到的那样实现它。

我有以下TouchableOpacity按钮。

<TouchableOpacity
  onPress={() => {
    this.props.navigation.navigate('SomeScreen', {
      title: 'Title',
      subTitle: 'Subtitle',
    });
  }}
>

在另一个页面上（我们称之为 Somescreen），我有以下内容：

render() {
  const { navigation } = this.props;
  const title = navigation.getParam('title');
}

但title以上是未定义的：

{ params: undefined, routeName: "Somescreen", key: "id-xx" }

我的根堆栈：

const RootStack = createStackNavigator({
  SomescreenA: { screen: SomescreenA },
  SomescreenB: { screen: SomescreenB },
}, { headerMode: 'none' });

为什么我的参数在新屏幕中未定义？