自学React-native （第三天）-- StackNavigator导航

自学React-native （第三天）-- StackNavigator导航

1.前言：

对您有帮助的话请点个赞哈~~。博主拜谢

stackNavigator是一个简单的Navigator(导航器)，顾名思义基本概念是采用stack(堆栈)管理路由的方式。stackNavigator没有上下导航栏，仅支持跳转导航类似于web中的超链接。

2.使用方式：

1. 在index.js中我们这样引入：

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { createAppContainer } from "react-navigation";
import { StackNavigator } from "./navigators/AppNavigators";

AppRegistry.registerComponent(appName, () => createAppContainer(StackNavigator));

import { createAppContainer } from “react-navigation”; 引入createAppContainer。在react-navigation升级后必须在外部包裹一层 createAppContainer(StackNavigator),从源码看来createAppContainer是一个高阶组件包装了路由相关的代码，估计是为了分离view层和control层做出的修改。

2. AppNavigators是我们的自定义路由module:

import React from "react";
import { View, Text ,Button } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
// import FlexBoxTest from "../FlexBoxTest";
import HomePage from "../pages/HomePage";
import Page1 from "../pages/page1";
import Page2 from "../pages/page2";
import Page3 from "../pages/page3";
export const StackNavigator = createStackNavigator({
  Home: {
    screen: HomePage
  },
  Page1: {
    screen: Page1,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.name}页面名`
    })
  },
  Page2: {
    screen: Page2,
    navigationOptions: ({ navigation }) => ({
      //在这里定义每个页面的导航数据，静态配置
      title: `This is Page2`
    })
  },
  Page3: {
    screen: Page3,
    navigationOptions: props => {
      const { navigation } = props;
      const { state, setParams } = navigation;
      const { params } = state;
      return {
        title: params.title ? params.title : `this is ${params.name}`,
        headerRight: (
          <Button
            title={params.mode === "edit" ? "保存" : "编辑"}
            onPress={() =>
              setParams({ mode: params.mode === "edit" ? "" : "edit" })
            }
          />
        )
      };
    }
  }
});

从上面代码我们可以看出，createStackNavigator实际是定义了一个路由映射表，StackNavigator的属性有：

screen：对应界面名称，需要填入import之后的页面  
mode：定义跳转风格  
    card：使用iOS和安卓默认的风格  
    modal：iOS独有的使屏幕从底部画出。类似iOS的present效果  
  
headerMode：返回上级页面时动画效果  
    float：iOS默认的效果  
    screen：滑动过程中，整个页面都会返回  
    none：无动画  
  
cardStyle：自定义设置跳转效果  
    transitionConfig： 自定义设置滑动返回的配置  
    onTransitionStart：当转换动画即将开始时被调用的功能  
    onTransitionEnd：当转换动画完成，将被调用的功能  
  
path：路由中设置的路径的覆盖映射配置  
  
initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件  
  
initialRouteParams：初始路由参数  

• 其中navigationOptions重要的属性有：

        title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用  
        header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null  
        headerTitle：设置导航栏标题，推荐  
        headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null  
        headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"  
        headerRight：设置导航条右侧。可以是按钮或者其他视图控件  
        headerLeft：设置导航条左侧。可以是按钮或者其他视图控件  
        headerStyle：设置导航条的样式。背景色，宽高等  
        headerTitleStyle：设置导航栏文字样式  
        headerBackTitleStyle：设置导航栏‘返回’文字样式  
        headerTintColor：设置导航栏颜色  
        headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0  
        gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭  

3. HomePage.js

import React from "react";
import { View, Text, Button } from "react-native";
export default class HomeScreen extends React.Component {
  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Welcome to HomePage</Text>
        <Button
          title={"Go to Page1"}
          onPress={() => {
            navigation.navigate("Page1", { name: "动态的" });
          }}
        />
        <Button
          title={"Go to Page2"}
          onPress={() => {
            navigation.navigate("Page2", { name: "动态的" });
          }}
        />
        <Button
          title={"Go to Page3"}
          onPress={() => {
            navigation.navigate("Page3", { name: "Devio" });
          }}
        />
      </View>
    );
  }
}

在页面中我们可以通过navigation,navigate跳转和传递params,params将会在AppNavigator中通过props,navigation.state.params 来获取（引用链这么长不知道作者怎么想的……）

3.后记

StackNavigator的配置非常简单，用于实现类似于web的a标签跳转的效果，当然你可以配置跳转的动画，title的文案等等，总的来说还是个很简单的控件。