React Nativereact-native突突突React Native

react-navigation3.0版本的使用详解

2018-12-06  本文已影响3590人  真的稻城

入门：

React Navigation诞生于React Native社区需要一个由javascript编写的扩展且易于使用的导航解决方案。目前react-navigation已经更新到3.x版本了。如果对react-navigation不了解的可以先看React Native Express(http://www.reactnativeexpress.com/)前4章

什么是导航器：

导航器可以看作是一个普通的React组件，可以通过导航器来定义APP的导航结构，导航器还可以渲染通用元素，比如配置标题栏和选项卡栏，在React-navigation中有一下三种类型的导航器：createStackNavigator，createSwitchNavigator，createDrawerNavigator，createBottomTabNavigator，createMaterialBottomTabNavigator，createMaterialTopTabNavigator等，详情请看官网：https://reactnavigation.org/docs/en/material-top-tab-navigator.html

两个与导航器相关的概念：

Navigation prop 详解

当导航器中的屏幕被打开时，会收到一个navigation prop，navigation包含以下功能

class ProfileScreen extends React.Component {
  render() {
    return (
      <Button
        onPress={()=>navigation('Profile', {name: '稻城'})}
        title="Set title name to '稻城'"
      />
    );
  }
}

class ProfileScreen extends React.Component {
  render() {
    return (
      <Button
        onPress={goBack()}
        title="Set title name to '稻城'"
      />
    );
  }
}

class ProfileScreen extends React.Component {
  render() {
    const params = this.props.navigation.state
    return <Text>Name: {params.name}</Text>;
  }
}


class ProfileScreen extends React.Component {
  render() {
    return (
      <Button
        onPress={() => this.props.navigation.setParams({ name: 'Lucy' })}
        title="Set title name to '稻城'"
      />
    );
  }
}

import { NavigationActions } from 'react-navigation';

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',
  params: {},

  // navigate can have a nested navigate action that will be run inside the child router
  action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});
this.props.navigation.dispatch(navigateAction);

navigation有一下几种方式：

navigation.push(routeName, params, action)

navigation.pop(n)  //n为在路由堆栈中的第几个screen

navigation.popToTop()

navigation.replace(routeName, params, action)

navigation.reset([NavigationActions.navigate({ routeName: 'Profile' })], 0

navigation.dismiss()

createStackNavigator的使用

为APP提供一种在屏幕之间转换的方式，其中每个新屏幕都放置在堆栈顶部。默认情况下，堆栈导航器配置为具有熟悉的iOS和Android外观：新的屏幕从iOS右侧滑入，从Android底部淡入。在iOS上，堆栈导航器也可以配置为模式样式，屏幕从底部滑入。

API的定义

createStackNavigator(RouteConfigs, StackNavigatorConfig);

RouteConfigs

route configs对象是从路由名称到路由配置的映射，它告诉导航器为该路由提供什么。

createStackNavigator({
  // For each screen that you can navigate to, create a new entry like this:
  Profile: {
    // `ProfileScreen` is a React component that will be the main content of the screen.
    screen: ProfileScreen,
    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.

    // Optional: When deep linking or using react-navigation in a web app, this path is used:
    path: 'people/:name',
    // The action and route params are extracted from the path.

    // Optional: Override the `navigationOptions` for the screen
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.name}'s Profile'`,
    }),
  },

  ...MyOtherRoutes,
});
StackNavigatorConfig

路由器的选项

视觉选项

navigationOptions 用于导航器内的屏幕导航选项

createBottomTabNavigator的使用

屏幕底部的一个简单标签栏，可让您在不同的路线之间切换。路由被懒惰地初始化 - 它们的屏幕组件在首次聚焦之前不会被安装

API的定义

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);

RouteConfigs

route configs对象是从路由名称到路由配置的映射，它告诉导航器为该路由提供什么，请参阅堆栈导航器中的示例。

BottomTabNavigatorConfig
tabBarOptions: {
  activeTintColor: '#e91e63',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'blue',
  },
}
navigationOptions 用于导航器内的屏幕导航选项

实战部分

基于react-navigation3.0最新的版本实现stack in tabs 和stack over tabs 两种效果

Stack in tabs

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {
  createStackNavigator,
  createBottomTabNavigator,
  createAppContainer,
  createMaterialTopTabNavigator,
} from 'react-navigation'
import { HomeTab, FindTab } from './Router/routers'


const CreateTab = createMaterialTopTabNavigator({
  Home: {
    screen: HomeTab,
    navigationOptions: () => ({
      tabBarLabel: '首页',
    })
  },
  Find: {
    screen: FindTab,
    navigationOptions: () => ({
      tabBarLabel: '发现',
    })
  }
}, {
  initialRouteName: 'Find',
  tabBarPosition: 'bottom',
  lazy: true,
  swipeEnabled: false,
  tabBarOptions: {
    activeTintColor: 'red',
    style: {
      backgroundColor: '#fff',
    },
  }
})

const CreaterTab = createAppContainer(CreateTab)

export default class App extends Component {
  render() {
    return (
      <CreaterTab />
    );
  }
}

Stack over tabs

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {
  createStackNavigator,
  createBottomTabNavigator,
  createAppContainer,
  createMaterialTopTabNavigator,
} from 'react-navigation'
import { HomeTab, FindTab } from './Router/routers'
import WebScreen from './screen/web/webScreen'


const CreateTab = createMaterialTopTabNavigator({
  Home: {
    screen: HomeTab,
    navigationOptions: () => ({
      tabBarLabel: '首页',
    })
  },
  Find: {
    screen: FindTab,
    navigationOptions: () => ({
      tabBarLabel: '发现',
    })
  }
}, {
  initialRouteName: 'Find',
  tabBarPosition: 'bottom',
  lazy: true,
  swipeEnabled: true,
  tabBarOptions: {
    activeTintColor: 'red',
    style: {
      backgroundColor: '#fff',
    },
  }
})

const StacksOverTabs = createStackNavigator({
  Root: {
    screen: CreateTab,
    navigationOptions: {
        header: () => null, 
    }
  },
  WebView: {
        screen: WebScreen,
        navigationOptions: {
            title: '熊孩宝测试',
        },
    }
});

const StacksOverTab = createAppContainer(StacksOverTabs)

export default class App extends Component {
  render() {
    return (
      <StacksOverTab />
    );
  }
}
上一篇 下一篇

猜你喜欢

热点阅读