React Navigation（四）-createStackNavigator(API)

最新推荐文章于 2025-03-12 09:10:37 发布

小xuanxuan

最新推荐文章于 2025-03-12 09:10:37 发布

阅读量4.7k

点赞数

原文链接

提供了screen之间相互跳转的方式，每一个新的screen将置于栈顶。

默认情况下，栈导航器的配置是苹果和安卓熟悉的look和feel：ios中新的screen从有的划入，安卓中是从底部淡入。在ios中，也可以设置成从底部划入的modal形式。

API 定义

createStackNavigator(RouteConfigs, StackNavigatorConfig);

RouteConfigs

第一个参数：路由配置对象是路由名称与路由配置的映射，告诉导航器路由里有哪些东西。

createStackNavigator({
  // 对于每一个能跳转到的screen，创建这样的实体:
  Profile: {
    // `ProfileScreen` 是react组件，是screen的主要内容，（就是之前文章里提过的在screen里注册过的组件）.
    screen: ProfileScreen,
    // 当`ProfileScreen` 被StackNavigator加载, 那么他就有了`navigation`属性，（系列文章第一篇第一句就是这个）.

    // 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

第二个参数：路由器选项

initialRouteName - 设置默认screen. 必须是第一个参数中的key之一（比如 'Profile'）.
initialRouteParams - 初始路由的参数
initialRouteKey - 初始路由可选识别符
navigationOptions - screens的默认导航选项
paths - 会覆盖第一个参数中设置的映射

可视化选项：

mode - 定义了渲染和过渡的风格:
- card - 默认选项，使用ios和安卓标准风格.
- modal - screen从底部划入. 只在ios有效，安卓无影响.
headerMode - 指明头部的渲染方式:
- float - 渲染一个顶部的唯一header，当screen变化时渲染. 是iOS的共通模式.
- screen - 每一个screen都attache一个header并且header随着screen一起淡入淡出. 是Android的共通模式.
- none - header不被渲染（如果不需要header导航栏，可以用这个选项）.
headerTransitionPreset - 当headerMode: float 时，指定header怎样在screen之间过度.
- fade-in-place - Header components cross-fade without moving, similar to the Twitter, Instagram, and Facebook app for iOS. This is the default value.
- uikit - An approximation of the default behavior for iOS.
cardStyle - Use this prop to override or extend the default style for an individual card in stack.
transitionConfig - Function to return an object that is merged with the default screen transitions (take a look at TransitionConfig in type definitions). Provided function will be passed the following arguments:
- transitionProps - Transition props for the new screen.
- prevTransitionProps - Transitions props for the old screen.
- isModal - Boolean specifying if screen is modal.
onTransitionStart - Function to be invoked when the card transition animation is about to start.
onTransitionEnd - Function to be invoked once the card transition animation completes.

（大多都是跳转过度效果设置）

navigationOptions

（两个参数里头都能设置该项，如果都进行了设置，以第二个参数会被覆盖，因为第一个参数是每个screen的个性化设置，第二个参数里头是通用设置）

title

string类型，是headerTitle的备选项。另外如果嵌套在TabNavigator中，则是tabBarLabel的备选项，嵌套在DrawerNavigator中，是drawerLabel的备选项。（备选项的意思就是如果没有设置该项，则使用title中的设置）

header

react元素或者返回值是react元素的函数，作为header显示，设置为null隐藏header

headerTitle

字符串，react元素或者react组件。默认显示title中的设置。使用组件时，接收allowFontScaling，style和children三个属性。字符串标题将会传入children中。

headerTitleAllowFontScaling

header的标题字体是否缩放以适应文字尺寸的设置。默认为真。

headerBackImage

react元素或者组件，在header返回按钮处显示自定义图标。当使用组件时，接收tintColor，title等一些属性。默认是图片组件，在ios平台是v型箭头，在安卓平台是<-箭头

headerBackTitle

ios中被返回按钮使用的字符串，设置成null禁用。默认使用上一个页面的headerTitle。该属性必须在原始screen中定义，而不是目标screen中。例如要从A到B，想要在B中禁用：

StackNavigator({
  A: {
    screen: AScreen,
    navigationOptions: () => ({
      title: `A`,
      headerBackTitle: null
    }),
  },
  B: {
    screen: BScreen,
    navigationOptions: () => ({
      title: `B`,
    }),
  }
});

headerTruncatedBackTitle

当headerBackTitle不适应屏幕时，该属性字符会被返回按钮使用。默认时"返回",定义方式与headerBackTitle一样：

StackNavigator({
  A: {
    screen: AScreen,
    navigationOptions: () => ({
      title: `A`,
      headerBackTitle: 'A much too long text for back button from B to A',
      headerTruncatedBackTitle: `to A`
    }),
  },
  B: {
    screen: BScreen,
    navigationOptions: () => ({
      title: `B`,
    }),
  }
});

headerRight

展示在header右侧的react元素

headerLeft

显示在header左边的react元素或者组件。当使用组件时，接收onPress，title，titleStyle等属性-点击查看完整的列表

headerStyle

header的style对象

headerForceInset

允许将forceInset对象传递到header内部的SafeAreaView中

headerTitleStyle

title组件的style对象

headerBackTitleStyle

返回title的style对象

headerTintColor

header的颜色

headerPressColorAndroid

material的波纹颜色（安卓版本大于5.0）

headerTransparent

默认时false。如果设置成true，header没有背景色，除非你在headerStyle或者headerBackground中明确指定。

headerBackground

使用该属性与headerTransparent，提供一个组件来渲染header的背景。

gesturesEnabled

是否能使用手势关闭screen。ios默认true，安卓默认false。

gestureResponseDistance

是一个对象，覆写从screen边缘开始触摸到可识别的这段距离。有以下两个属性：

horizontal - 数字- 水平距离，默认25.
vertical - 数字 - 垂直距离，默认135.

gestureDirection

字符串，覆写关闭手势的方向。"default"时正常，“inverted”是从右向左

Navigator Props

StackNavigator（...)创建navigator组件需要下列属性：

screenProps - 向ziscreen传递额外选项, 例如:

const SomeStack = createStackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

Examples

SimpleStack.js and ModalStack.js

const ModalNavigator =createStackNavigator(
  {
    Main: { screen: Main },
    Login: { screen: Login },
  },
  {
    headerMode: 'none',
    mode: 'modal',
    navigationOptions: {
      gesturesEnabled: false,
    },
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing,
      },
      screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;

        const height = layout.initHeight;
        const translateY = position.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [height, 0, 0],
        });

        const opacity = position.interpolate({
          inputRange: [index - 1, index - 0.99, index],
          outputRange: [0, 1, 1],
        });

        return { opacity, transform: [{ translateY }] };
      },
    }),
  }
);

header的过度同时也能使用transitionConfig下的headerLeftInterpolator, headerTitleInterpolator 和headerRightInterpolator来配置