React Navigation-(Qucik Start)快速开始

Posted 2020-10-22 isam2016

快速开始

要开始使用React Navigation，您只需安装 react-navigation npm包

npm install --save react-navigation
yarn add react-navigation

要开始使用React Navigation，您必须创建一个导航器。 React导航带有三个默认导航器。

• StackNavigator- 为app中的屏幕到堆栈最顶层转场提供了过度途径。
• TabNavigator- 用于设置具有多个选项卡的屏幕。
• DrawerNavigator- 用于设置抽屉导航屏幕。

创建一个 StackNavigato

StackNavigator的是最常见的导航形式，所以我们将它作为基本的演示。

import { StackNavigator } from ‘react-navigation‘;
const RootNavigator = StackNavigator({
});
export default RootNavigator;

然后，我们可以添加屏幕到这个StackNavigator。 每个键代表一个屏幕。

import React from ‘react‘;
import { View, Text } from ‘react-native‘;
import { StackNavigator } from ‘react-navigation‘;

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Home Screen</Text>
  </View>
);

const DetailsScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Details Screen</Text>
  </View>
);

const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
});

export default RootNavigator;

不要在RootNavigator 添加父级,例如:

import {
  RootNavigator
} from ‘./app/index.js‘;

export default class App extends Component < {} > {
  render() {
    return (
      <View>
        <RootNavigator></RootNavigator>
      </View>
    );
  }
}
会出现错误

现在我们给导航头增加一个标题；

const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      headerTitle: ‘Home‘,
    },
  },
  Details: {
    screen: DetailsScreen,
    navigationOptions: {
      headerTitle: ‘Details‘,
    },
  },
});

export default RootNavigator;

Creating a TabNavigator

要开始使用TabNavigator首先导入并创建一个新的RootTabs组件。

import React from ‘react‘;
import { View, Text } from ‘react-native‘;
import { TabNavigator } from ‘react-navigation‘;

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Home Screen</Text>
  </View>
);

const ProfileScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Profile Screen</Text>
  </View>
);

const RootTabs = TabNavigator({
  Home: {
    screen: HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
});

export default RootTabs;

现在让我们为标签栏设置一个标签和图标。

我们将在示例中使用 react-native-vector-icons 
如果你没有安装在你的项目中安装。
如果你没有安装成功react-native-vector-icons 可以尝试(RN+0.52.1 react=16.2.0)

rm node_modules/react-native/local-cli/core/fixtures/files/package.json

rnpm link react-native-vector-icons

这将确保tabBarLabel是一致的（使用嵌套的导航器时很重要），它将设置一个tabBarIcon。 这个图标默认情况下会在ios上默认显示，因为它使用了标签栏组件，与android上的标准设计模式一致。

Creating a DrawerNavigator

要开始使用TabNavigator首先导入并创建一个新的RootTabs组件。

import { DrawerNavigator } from ‘react-navigation‘;

const RootDrawer = DrawerNavigator({

});

export default RootDrawer;

现在我们创建DrawerNavigator

import React from ‘react‘;
import { View, Text } from ‘react-native‘;
import { DrawerNavigator } from ‘react-navigation‘;

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Home Screen</Text>
  </View>
);

const ProfileScreen = () => (
  <View style={{ flex: 1, alignItems: ‘center‘, justifyContent: ‘center‘ }}>
    <Text>Profile Screen</Text>
  </View>
);

const RootDrawer = DrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
});

export default RootDrawer;

简介