RN组件系列之导航（React-Navigation）

1、React-Navigation有三种类型的导航器：

三种导航

• StackNavigator

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

const HomeScreen = ({ navigation }) => (         // 传入navigation对象
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
    <Button
          onPress={() => navigation.navigate('Details')}
          title="Go to details"
        />
  </View>
);
const DetailsScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Details Screen</Text>
  </View>
);
const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
          headerTitle: 'Home',
        },
  },
  Details: {
    screen: DetailsScreen,
     navigationOptions: {
          headerTitle: 'Details',
        },
  },
});

export default RootNavigator;

当点击Button就会跳到Detail

Home
Detail

• TabNavigator

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,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
          name={focused ? 'ios-home' : 'ios-home-outline'}
          size={26}
          style={{ color: tintColor }}
        />
      ),
    },
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: {
      tabBarLabel: 'Profile',
      tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
          name={focused ? 'ios-person' : 'ios-person-outline'}
          size={26}
          style={{ color: tintColor }}
        />
      ),
    },
  },
});

export default RootTabs;

TabNavigator.png

• DrawerNavigator

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

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
     <Button
          onPress={() => navigation.navigate('DrawerToggle')}
          title="Open Drawer"
        />
  </View>
);

const ProfileScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Profile Screen</Text>
     <Button
              onPress={() => navigation.navigate('DrawerToggle')}
              title="Open Drawer"
            />
  </View>
);

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

export default RootDrawer;

DrawerNavigator.png

2、三个对象

• navigation
  navigation.state.params.***可以拿到上一个页面传的参数
  navigation.setParams 可以设置参数

<Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}          //下个页面可用navigation.state.params.user
          title="Chat with Lucy"
        />

navigation.navigate('Name') 可以主动导航到某页面

3、嵌套导航

navigator就是一个组件！！

• 在一个屏幕中嵌套（这个屏幕就是一个navigator）
• 在一个组件内嵌套（navigator只是这个屏幕的一部分）

参考

react-navigation使用技巧
React-Native组件用法详解之ListView