react-native 抽屉页面实现

DrawerLayoutAndroid:
抽屉（通常用于导航切换）是通过renderNavigationView方法渲染的，并且 DrawerLayoutAndroid 的直接子视图会成为主视图（用于放置内容）。导航视图一开始在屏幕上并不可见，不过可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。

译注：此组件仅能在 Android 上使用。我们推荐使用跨平台的react-navigation中的 DrawerNavigation 来代替此组件。

直接上代码

import React from 'react';
import {ToastAndroid, Text, View, DrawerLayoutAndroid, TouchableOpacity, StyleSheet} from 'react-native';

export default class FetchExample extends React.Component {

    constructor(props) {
        super(props);
        this.state = {isLoading: true}
    }

    open = () => {
        this.drawer.openDrawer();
    }

    close = () => {
        this.drawer.closeDrawer();
    }

    render() {
        let navigationView = (
            <View style={{flex: 1, backgroundColor: 'skyblue'}}>
                <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
                <TouchableOpacity onPress={this.close}>
                    <Text style={[styles.textStyle, styles.textSmall]}>点击关闭侧边栏</Text>
                </TouchableOpacity>

            </View>
        );
        return (
            <DrawerLayoutAndroid
                ref={(drawer) => {
                    this.drawer = drawer;
                }}
                //
                drawerWidth={300}
                // 设置导航视图从窗口边缘拉入的视图的宽度。
                drawerPosition={DrawerLayoutAndroid.positions.Left}
                // 设置导航视图从屏幕的哪一边拉入。
                renderNavigationView={() => navigationView}
                // 被拉入的导航视图的内容。

                onDrawerClose={() => {
                    ToastAndroid.show("close drawer", ToastAndroid.SHORT)
                }}
                // 导航视图被关闭后的回调函数。
                keyboardDismissMode='none'
                // 设置拖动过程中是否隐藏软键盘,'none' (默认)，拖动时不隐藏软键盘。'on-drag'，拖动时隐藏软键盘。
                onDrawerOpen={() => {
                    ToastAndroid.show("open drawer", ToastAndroid.SHORT);
                }}
                // 导航视图被打开后的回调函数。
            >
                <View style={{flex: 1, alignItems: "center"}}>
                    <Text style={{margin: 10, fontSize: 15,}}>Hello</Text>
                    <Text style={{margin: 10, fontSize: 15,}}>World!</Text>
                    <TouchableOpacity onPress={this.open}>
                        <Text style={styles.textStyle}>点击打开侧边栏</Text>
                    </TouchableOpacity>

                </View>
            </DrawerLayoutAndroid>
        );
    }
}
const styles = StyleSheet.create({
    textStyle: {
        margin: 10,
        color: 'red',
        textAlign: 'center',
        fontSize:15,
    },
    textSmall: {
        fontSize: 25,
    },

})

react-navigation之DrawerNavigator使用方法
api:StackNavigator(RouteConfigs, StackNavigatorConfig)
RouteConfigs（路由配置）
StackNavigatorConfig（相关选项）
- initialRouteName 设置栈中的默认显示路由（页面），必须匹配路由配置中的一个键值
- initialRouteParams 默认路由的参数
- navigationOptions 用于屏幕的默认导航选项
- paths覆盖路由配置中设置的 path
- mode - 定义渲染和页面切换的风格，以下两个选项是其可以使用的两个枚举值，下面同理：
  1 .card - 使用标准的 iOS 和 Android 屏幕切换风格。这是默认的。
  2 .modal - 使屏幕从底部滑入，这是一种常见的 iOS 模式。只适用于 iOS，对 Android 没有任何影响。
- headerMode - 指定标题栏的渲染方式：
  1 .float - 在页面切换时渲染一个固定在顶部的单个标题栏和动画。这是 iOS 上的常见模式。
  2 .screen - 每个页面都有各自的标题栏，并且伴随着页面切换一起淡入淡出。这是 Android 上的常见模式。
  3 .none - 不渲染标题栏，当你需要自定义标题栏的时候，可以设置这个选项。
- cardStyle - 使用这个属性重写或继承栈中单个卡片（页面）的默认样式。
  1 .transitionConfig - 返回值是与默认页面切换相关的对象的函数。提供的函数将传递以下参数：
  2 .transitionProps - 给新页面的切换相关属性。
  3 .prevTransitionProps - 给旧页面的切换相关属性。
- isModal - 切换风格是否是 modal。
  1 .onTransitionStart - 当切换动画开始时调用的函数。
  2 .onTransitionEnd - 当切换动画结束时调用的函数。

举个栗子：

import React, {Component} from 'react';
import FirstPage from './FirstPage';
import {
    DrawerNavigator
} from 'react-navigation';

export default class Pages extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <SimpleAppNavigator/>
        )
    }
}
const SimpleAppNavigator = DrawerNavigator({
        page1: {screen: FirstPage},
    },

    {
        initialRouteParams: {user: 'hello'},
        initialRouteName: 'page1',
        navigationOptions: {
            title: 'Hello Navigation!'
        },

    }
);

//first 组件页面
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';
export default class SecondPage extends Component {


    render() {
        const {params} = this.props.navigation.state;
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    {params.user} world!
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    textView: {
        fontSize: 16,
        textAlign: 'center',
        margin: 10,
        color:'red'
    },
});

react-native 抽屉页面实现

猜你喜欢