标签: react-navigation

非常感谢对此的帮助。
我有一个领域 listView，可以导航到详细视图。
详细视图正在从原始列表视图中删除条目并导航回来。我已在领域数据库更改上注册了侦听器以更新列表视图的内容。
这是我正在使用的代码，删除后会出现异常 - 在导航发生后“访问已失效或删除的联系人类型的对象”。
有人知道为什么吗？
另外，似乎更改监听器（updateContactsFromDB）被调用了两次，同时只删除了一个对象 - 想法？

10倍

ContactPage.js:

export default class ContactsPage extends Component {
  updateContactsFromDB(){
    console.log("ContactsPage:updateContactsFromDB()");
    let contacts = Realm.objects('Contact');
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(contacts.snapshot()),
    });
  }
  constructor(props) {
    console.log("ContactsPage:constructor()");
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => (r1 !== r2)});
    let contacts = Realm.objects('Contact');
    this.state = {
      dataSource: ds.cloneWithRows(contacts.snapshot()),
    };
     this.updateContactsFromDB = this.updateContactsFromDB.bind(this);
  }
  componentWillMount(props){
    console.log("ContactsPage:componentWillMount");
    Realm.addListener('change', this.updateContactsFromDB);
  }
  componentWillUnmount(props){
    console.log("ContactsPage:componentWillUnmount");
    Realm.removeListener('change', this.updateContactsFromDB);
  }
  render() {
    console.log("ContactsPage:render()");
    return (
            <ListView
              dataSource={this.state.dataSource}
              renderRow={(contact) => ( …

我想在用户每次更改选项卡时重新加载 tabNavigator。当用户更改选项卡时，不会调用 React Native 的生命周期方法。那么如何在 TabNavigator 中重新加载选项卡：

下面的示例有两个选项卡：1) 主页 2) 事件。现在我想在用户从主页选项卡返回时刷新事件选项卡。

EXPO LINK： 世博标签导航器

代码 ：

import React, {Component} from 'react';
import  {View, StyleSheet, Image, FlatList, ScrollView, Dimensions } from 'react-native';
import { Button, List, ListItem, Card  } from 'react-native-elements' // 0.15.0
//import { Constants } from 'expo';
import { TabNavigator, StackNavigator } from 'react-navigation'; // 1.0.0-beta.11

//image screen width and height defs
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;


export default class App extends Component {
  render() { …

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

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

我需要为活动选项卡添加一个指示器，我尝试添加 borderBottom，tabStyle但我们无法检查焦点。

使用react-navigation v5和createBottomTabNavigator作为底部选项卡。

这是我的代码：

<BottomTab.Navigator
      tabBarOptions={{
        activeTintColor: colors.brown,
        labelPosition: 'below-icon',
      }}>
      <BottomTab.Screen
        name="Home"
        component={HomeTabNav}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({focused}) => {
            return focused ? (
              <HomeSelectedIcon height={ms(24)} width={ms(24)} />
            ) : (
              <HomeIcon height={ms(24)} width={ms(24)} />
            );
          },
        }}
      />
     ...
    </BottomTab.Navigator>
  );
};

提前致谢！

我不明白mergenavigation.navigate 的作用是什么

navigation.navigate({
   name: 'Home',
   params: { post: postText },
   merge: true,
});

代码参考取自https://reactnavigation.org/docs/params/

还有许多其他具有相同标题的帖子，但其中大多数已经过时，并且答案对我不起作用。以下是我尝试过但失败的一些修复：

• “反应本机启动--重置缓存”
• “npm开始--重置缓存”
• “npm 运行 android --reset-cache”
• “cd android -> gradlew clean -> cd..”
• 删除并重新安装node_modules文件夹
• 在更新react-native并执行/npm审核修复之前和之后删除并重新安装node_modules文件夹。据说有0个漏洞
• 纱线安装和纱线升级

当我尝试运行它时，即使重新启动计算机后也会出现此问题。我使用npm run android来启动应用程序。我注意到，在它停止工作的时候，我不小心向项目中添加了一些打字稿文件，而没有任何其他包。我已经删除了它们，但这有可能是造成这种情况的原因吗？我不认为它是条目文件路径的问题，因为错误状态如下所述。

有谁有其他想法如何解决它？如果需要更多代码片段，请告诉我。如有任何进一步的问题或建议，我们将不胜感激

我的 getJSMainModuleName() 返回的“index”应该是正确的，因为这在过去的项目中工作过，这让我相信它可能不是像错误所说的那样不正确的条目文件路径。

这是我执行“npm run android”时来自 Metro 的完整控制台输出。我不认为循环或引用错误导致了不变性违规。

 BUNDLE  ./index.js

 WARN  Require cycle: src\component\FeedList.js -> src\component\FeedCell.js -> src\component\TagDetail.js -> src\component\FeedList.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
 ERROR  ReferenceError: Can't find variable: i
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling …

我有以下结构（有替代名称，仅举例来说，文件很大并且有许多无法统一的上下文）：

应用程序.js

export default function App() {
  return (
    <NavigationContainer>
      <StatusBar
        translucent
      />
      <WarningProvider>
        <Screen2Context>
          <Screen3Context>
            <Routes />
          </Screen3Context>
        </Screen2Context>
      </WarningProvider>
    </NavigationContainer>
  );
}

AppRoutes.js：

export default function Routes() {
  return (
      <Stack.Navigator
        initialRouteName={'Screen1'}
        screenOptions={{
          headerShown: false,
        }}>

      <Stack.Screen name="Screen1" component={Screen1} />
      <Stack.Screen name="Screen2" component={Screen2} />
      <Stack.Screen name="Screen3" component={Screen3} />

     </Stack.Navigator>
    );
}

但这样所有的屏幕都可以访问上下文，并且由于我需要某些屏幕的更具体的上下文，我不希望所有屏幕都可以访问这些上下文，并且还可以避免污染 App.js （或其他任何其他输入文件）比路由），但是当尝试使用提供者包装路由时会生成错误：

Error: A navigator can only contain 'Screen' components as its direct children.

所以问题是：如何使用react-navigation仅使用上下文/提供者包装一些屏幕？

情况：

正如您可能知道的那样，我目前正在构建一个有声读物播放器（多么有创意）。这是我第一个针对反应原生和打字稿的更大项目，在正确输入导航方面我有点挣扎。首先：这是一个快速概述：

疑问/问题：

1. 感觉我使用了太多嵌套导航器，但由于我没有任何经验，所以很难判断。你怎么认为？如果我使用太多，我应该如何重组？（文档提到了组，但我不知道如何在这里实现）
2. 如何正确键入我的组件？到目前为止我的做法如下（LibraryStack 自下而上的视角）：

// 1. I created a type for the Screen routes (including the passed down props)
type LibraryRoutes = {
  Library: undefined;
  BookDetails: { album: Album };
  BookSettings: { album: Album };
};

// 2. A type for the different Routes (using NavigatorScreenParams, but I'm not sure I use them correctly)
// This then goes up the same way up to the root
type TabRoutes = {
  HomeStack: NavigatorScreenParams<HomeRoutes>;
  LibraryStack: NavigatorScreenParams<LibraryRoutes>;
  ...etc.
}; …

我正在尝试将旧的 React navigation v4 迁移到 v6（超过 100 条路线）。但我面临着如何找到最佳结构来分割单独文件/组件中的屏幕组。

我已经尝试过这样做，以移出模态：

const ModalGroup = () => (
  <Stack.Group screenOptions={{ presentation: "modal" }}>
    <Stack.Screen name="ModalA" component={ModalAScreen} />
    <Stack.Screen name="ModalB" component={ModalBScreen} />
  </Stack.Group>
);

export const RootNavigator = () => (
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    <ModalGroup />
  </Stack.Navigator>
);

但在运行时不允许出现此错误：

错误：导航器只能包含“Screen”、“Group”或“React.Fragment”作为其直接子级（找到“ModalGroup”）。要在导航器中渲染此组件，请将其在 'component' 属性中传递给 'Screen'。

但这是有效的（但对我来说看起来很难看）：

export const RootNavigator = () => (
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    {ModalGroup()}
  </Stack.Navigator>
);

那么，在单独的文件中构建/组织屏幕组以避免创建包含所有配置和导入的巨大根导航器的最佳方法是什么？

我目前正在尝试在react-navigaionmaterial-top-tabs（也水平滚动）的内容中定位水平ScrollView 。

// Importing Top Tabs creator
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

...

// Creating the Tab Navigator
const Tab = createMaterialTopTabNavigator();

...

// Configure Navigator
<Tab.Navigator
  initialRouteName="Tab 1"
  screenOptions={{
    headerShadowVisible: false,
    headerStyle: {
      backgroundColor: colors.background,
    },
  }}
  // Using custom TabBar component
  tabBar={(props) => <TabBar {...props} />}
>
  // The horizontal ScrollView is in "Tab 1"
  <Tab.Screen
    name="Tab …