美文网首页
react-native 抽屉页面实现

react-native 抽屉页面实现

作者: Lucky_ce60 | 来源:发表于2019-01-17 16:04 被阅读0次
    • 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 抽屉页面实现

          本文链接:https://www.haomeiwen.com/subject/ueobdqtx.html