反应本机导航

Question

我创建了 2 个屏幕 Screen1.js 和 Screen2.js Screen1.js 将是初始屏幕，而 Screen2.js 将是登录屏幕。我想要做的是在渲染 Screen1.js 5 秒后打开 Screen2.js。我试图从 'react-native' 导入 {Navigation} 但它不再存在于该库中。知道我该怎么做吗？

Answer 1

如果您想在react-native中使用导航，项目开发者建议您使用react-navigation。我已经用过了，效果很好。比如说你想要一个标签栏应用程序。您可以从 react-navigation 导入 TabNavigator 并使用它：

import { TabNavigator } from 'react-navigation'
...

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

更多示例和文档：https://reactnavigation.org/docs/navigators/tab

更新：

由于更新了 react-navigation 库，它是 v4。在 v4 中，您可以使用不同的方式创建选项卡，例如 BottomTabNavigator、MaterialBottomTabNavigator 和 MaterialTopTabNavigator。所以在 react-navigation v4 中上面的代码看起来是这样的：

import { createBottomTabNavigator } from 'react-navigation-tabs';
...

const MyApp = createBottomTabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
});

有关更多详细信息文档：https://reactnavigation.org/docs/en/tab-based-navigation.html

反应本机导航

React-native Navigation

reactjs

react-router

react-native

react-native-navigation