ReactNative导航器

React Native学习 本文总阅读量次

Android 独有的组件

ReactNative组件和API参考文档

ToastAndroid

  • 弹出一个Toast提示框。
  • 更多信息可参考文档
方法 描述
show(String message,int duration) String message: 一个字符串，表示将要显示的文本内容。
int duration: 提示信息持续显示的时间。可以是ToastAndroid.SHORT或者ToastAndroid.LONG
showWithGravity() 指定弹出的位置。参数值可以是ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER

例子：

1
2
3
4
5
6
7
8
import { ToastAndroid } from 'react-native'; 

ToastAndroid.show("A pikachu appeared nearby !", ToastAndroid.SHORT);
ToastAndroid.showWithGravity(
  "All Your Base Are Belong To Us",
  ToastAndroid.SHORT,
  ToastAndroid.CENTER
);

使用导航器跳转页面（React Navigation）

  • 移动应用基本不会只由一个页面组成。管理多个页面的呈现、跳转的组件就是我们通常所说的导航器（navigator）。
  • React Native 有几个导航组件。刚开始接触直接选择React Navigation就好。 React Navigation 提供了简单易用的跨平台导航方案，在 iOS 和 Android 上都可以进行翻页式、tab 选项卡式和抽屉式的导航布局。
  • 如果你想同时在iOS和Android上达到看起来像原生，或者你想把RN整合到一个已经有原生导航管理的APP里, 下面这个库提供了在两个平台都适用的原生导航: react-native-navigation.
  • 可以参考React Navigation使用指南，也可以在慕课这个视频教程中学习到React Navigation。

什么是导航器

  • 导航器也可以看成是一个普通的React组件，你可以通过导航器来定义你的App的导航结构。
  • 导航器还可以渲染通用元素，例如可以配置的标题栏和选项卡栏。

在react-navigation中有以下5种类型的导航器：

导航器 描述
createStackNavigator 屏幕上方导航栏，类似于普通的Navigator
createBottomTabNavigator 屏幕底部的导航栏，相当于iOS里面的TabBarController
createMaterialTopTabNavigator 屏幕顶部的材料设计主题导航栏
createDrawerNavigator 抽屉效果，侧边滑出
createSwitchNavigator SwitchNavigator 的用途是一次只显示一个页面

导航器的属性

属性 描述
ref 可以通过ref属性获取到Navigation
onNavigationStateChange（prevState，newState，action） 顶级节点除了ref 属性之外，还接受onNav igat ionStateChange（prevState，newState，action）属性，每次当导航器所管理的state发生改变时，都会回调该方法
。prevState：变化之前的state；
。newState：新的state；
。导致state变化的action
screenProps 向子屏幕传递额外的数据，子屏幕可以通过this.props.screenProps获取到该数据

例子

导航器相关的两个概念

在开始学习导航器之前，我们需要先了解两个和导航相关的概念：

概念 描述
Screen navigation prop（屏幕导航属性） 通过navigatioh可以完成屏幕之间的调度操作，例如打开另一个屏幕
Screen navigationOptions（屏幕导航选项） 通过navigationOptions可以定制导航器显示的方式（例如：头部标题，选项卡标签等）

当导航器中的屏幕被打开时，它会收到一个navigation 属性，navigation 属性 是整个导航环节的关键一员，接下来就详细讲解一下navigation的作用。

  • navigate()：跳转到其他界面
  • state：屏幕的当前state
  • setParams()：改变路由的 params（参数）
  • goBack：关闭当前屏幕
  • dispatch()：向路由发送一个action
  • addListener：订阅导航生命周期的更新
  • isFocused：true 标识屏幕获取了焦点
  • getParam：获取具有回退的特定参数
  • dangerouslyGetParent：返回父导航器

注意：一个navigation有可能没有navigate、setParams 以及goBack，只有state与dispatch，所以在使用navigate时要进行判断，如果没有navigate可以使用navigation去dispatch一个新的action。
如：
使用navigation去dispatch一个新的action
提示：这里的reset在2.0及以后版本中被从NavigationActions中移到了StackActions中，使用时记得留意。

StackNavigator的navigation的额外功能

  • 当且仅当 当前navigator 是 stack navigator（顶部导航）时，this.props.navigation上有一些附加功能。
  • 这些函数是navigate和goBack的替代方法，你可以使用任何你喜 欢的方法。这些功能是：
this.props.navigation的属性 描述
push 导航到堆栈中的一个新的路由
pop 返回堆栈中的上一个页面
popToTop 跳转到堆栈中最顶层的页面
replace 用新路由替换当前路由
reset 擦除导航器状态并将其替换为多个操作的结果
dismiss 关闭当前栈

支持以下参数：

  • title: 可以作为headerTitle的备选字段(当没设置headerTitle时会用该字段作为标题)，也可以作为TabNavigator的tabBarLabel以及DrawerNavigator的drawerLabel。
  • header: 自定义导航条，可以通过设置null来隐藏导航条；
  • headerTitle: 标题；
  • headerTitleAllowFontScaling: 标题是否允许缩放，默认true；
  • headerBackTitle: 定义在iOS上当前页面进入到下一页面的回退标题，可以通过设置null来禁用它；
  • headerTruncatedBackTitle: 当回退标题不能显示的时候显示此属性的标题，比如回退标题太长了；
  • headerBackImage：React 元素或组件在标题的后退按钮中显示自定义图片（回退图标）。 当组件被调用时，它会在渲染时收到许多 props 如：（tintColor，title）。 默认为带有 react-navigation/views/assets/back-icon.png 这张图片的组件，后者是平台的默认后图标图像（iOS上为向左的符号，Android上为箭头）。
  • headerRight: 定义导航栏右边视图；
  • headerLeft: 定义导航栏左边视图；
  • headerStyle: 定义导航栏的样式，比如背景色等；
  • headerTitleStyle: 定义标题的样式；
  • headerLeftContainerStyle：自定义 headerLeft 组件(导航栏左边视图)容器的样式，例如，增加 padding。
  • headerRightContainerStyle：自定义 headerRight 组件(导航栏右边视图)容器的样式,例如，增加 padding。
  • headerTitleContainerStyle：自定义 headerTitle 组件容器的样式, 例如，增加 padding。
  • headerBackTitleStyle: 定义返回标题的样式；
  • headerPressColorAndroid：颜色为材料波纹 (Android >= 5.0)；
  • headerTintColor: 定义导航条的tintColor，会覆盖headerTitleStyle中的颜色；
  • headerTransparent：默认为 false。如果 true, 则标头将不会有背景, 除非您显式提供 headerStyle 或 headerBackground。
  • headerBackground：与headerTransparent一起使用，以提供在标题后台呈现的组件。 例如，您可以使用模糊视图来创建半透明标题。
  • gesturesEnabled: 定义是否能侧滑返回，iOS默认true，Android默认false；
  • gestureResponseDistance: 定义滑动返回的有效距离，水平状态下默认：25，垂直状态默认135；
  • gestureDirection: 设置关闭手势的方向。默认从左向右，可以设置从右到左的滑动操作。

使用navigate进行界面之间的跳转

语法：

1
2
3
navigation.navigate（{routeName，params，action，key}）
//或
navigation.navigate（routeName，params，action）
参数 描述
routeName 要跳转到的界面的路由名，也就是在导航其中配置的路由名
params 要传递给下一个界面的参数
action (可选) 如果该界面是一个navigator的话，将运行这个sub-action
key (可选) 要导航到的路由的可选标识符。如果已存在，将后退到此路由

例子：页面跳转

HomeScreen跳转到Page1：
HomeScreen跳转到Page1

使用state的params

可以通过this.props.state.params来获取通过setParams（），或navigat ion.navigate（）传递的参数。
例子

使用setParams()改变路由的params

setParams：function setParams（params）：我们可以借助setParams来改变route params。比如，通过setParams来更新页面顶部的标题，返回按钮等。
例子
注意：
navigation.setParams改变的是当前页面的Params，如果要改变其他页面的Params可以通过NavigationActions.setParams完成，下文会讲到。

屏幕上方导航栏createStackNavigator（定义路由）

组件createStackNavigator提供APP屏幕之间切换的能力，它是以栈的形式还管理屏幕之间的切换，新切换到的屏幕会放在栈的顶部。

屏幕转场风格
默认情况下，createStackNavigator提供了转场过渡效果，在Android和iOS上过渡效果是不同的，这也是React Native重平台性的一个体现，在Android上从屏幕底部淡入，在iOS上是从屏幕的右侧划入，当然你也可以通过配置让StackNavigator支持屏幕从底部滑入的效果。

createStackNavigator API

  • createStackNavigator是一个函数，它返回一个包含两个属性的对象:Screen和Navigator。
    • Screen组件 指定路由。
      • Screen组件接受一个name属性，它对应于我们将用于导航的路由的名称。
      • Screen组件还有一个component属性，它对应于它将渲染的组件。
  • Screen和Navigator都是用于配置导航器的React组件。导航器应该将屏幕元素作为其子元素来定义路由配置。
  • 路由名称开头字母的大小写无关紧要，可以使用小写字母home或大写字母Home，这取决于你的喜好。 我们更喜欢将路由名称大写。
  • NavigationContainer是一个组件，它管理导航树并包含导航状态。此组件必须包装所有导航器结构。通常，我们会在app的根目录下呈现这个组件，这个根目录通常是app .js导出的组件。
1
createStackNavigator(RouteConfigs, StackNavigatorConfig);

参数RouteConfigs(必选)

RouteConfigs：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。RouteConfigs 支持三个参数screen、path以及navigationOptions。

参数 描述
screen (必选) 指定一个 React 组件作为屏幕的主要显示内容，当这个组件被createStackNavigator加载时，它会被分配一个navigation prop
path(可选) 用来设置支持schema跳转时使用，具体使用会在下文的有关Schema章节中讲到
navigationOptions(可选) 用以配置全局的屏幕导航选项如：title、headerRight、headerLeft等

参数StackNavigatorConfig(可选)

  • StackNavigatorConfig：配置导航器的路由(如：默认首屏，navigationOptions，paths等)、样式(如，转场模式mode、头部模式等)。
  • 从react-navigation源码中可以看出StackNavigatorConfig支持配置的参数有10个:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function createStackNavigator(routeConfigMap, stackConfig = {}) {
      const {
        initialRouteKey,
        initialRouteName,
        initialRouteParams,
        paths,
        navigationOptions,
        disableKeyboardHandling,
        getCustomActionCreators
      } = stackConfig;
    这7个参数可以根据作用不同分为路由配置、视图样式配置两类。

用于路由配置的参数

  • initialRouteName: 设置默认的页面组件，必须是上面已注册的页面组件(也就是说必须是RouteConfigs中配置过的页面组件)。
  • initialRouteParams: 初始化路由的参数。
  • navigationOptions: 屏幕导航的默认选项，下文会详细讲解。
  • initialRouteKey - 初始路由的可选标识符。
  • paths: 用来设置支持schema跳转时使用，具体使用会在下文的有关Schema章节中讲到。

用于导航样式配置的参数

  • mode: 页面切换模式。
    • card: 普通app常用的左右切换(相当于iOS中的push效果)。
    • modal: 上下切换(相当于iOS中的modal效果) 。
  • headerMode: 导航栏的显示模式。
    • float: 无透明效果, 默认。
    • screen: 有渐变透明效果, 如微信QQ的一样。
    • none: 隐藏导航栏。
  • headerBackTitleVisible : 提供合理的默认值以确定后退按钮标题是否可见，但如果要覆盖它，则可以使用true或 false 在此选项中。
    • fade-in-place（默认值）: 标题组件交叉淡入淡出而不移动，类似于iOS的Twitter，Instagram和Facebook应用程序。
    • uikit: iOS的默认行为的近似值。
    • headerTransitionPreset: 指定在启用headerMode：float时header应如何从一个屏幕转换到另一个屏幕。
  • cardStyle: 样式（iOS上页面切换会有白色渐变蒙层，想去掉则可以这样设置cardStyle: { opacity: null },切换页面时的页面边框也在这里可以设置）。
  • onTransitionStart: 页面切换开始时的回调函数 (我们可以在这里注册一些通知，告知我们切面切换的状态，方便后面处理页面切换事件)。
  • onTransitionEnd: 页面切换结束时的回调函数。

案例

创建一个StackNavigator类型的导航器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//使用createStackNavigator()创建StackNavigator类型的导航器
export const AppStackNavigator = createStackNavigator({
    //配置4个页面
    HomePage: {
        screen: HomePage
    },
    Page1: {
        screen: Page1,
        navigationOptions: ({navigation}) => ({
            //动态设置navigationOptions
            title: `${navigation.state.params.name}页面名`
        })
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            //在这里定义每个页面的导航属性，静态配置
            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 Page3',
                headerRight: (
                    <Button
                        title={params.mode === 'edit' ? '保存' : '编辑'}
                        onPress={() =>
                            setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
                    />
                ),
            }
        }
    },
}, {
    defaultNavigationOptions: {
        // 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
        // header: null,
    }
});
React Native学习