react-native-router-flux之Drawer的使用教程

前言(与本文内容无关 纯属初学感触和吐槽)

最近对 Hybrid 开发比较感兴趣 接触了一段时间的 Weex 现在来学习 ReactNative
同时还了解过 React 的语法, 并且都写过对应的几个 Demo
当时初学 React 的时候觉得 生态确实很好 但是有一点 初始化一个项目的方法太多了 太杂了 而且我觉得版本帝 React 是实至名归的
即使是过段时间我学习 ReactNative 的时候我也同样觉得 版本更新频繁这个问题还是很严重(主要是 Break Change 太多了)
生态跟不上的话, 做起项目来小心谨慎的, 很多插件或者轮子都难以跟上官方版本, 会导致你的项目也止步于旧版本并且还忙于用各种 Hack 方法修补官方的BUG 😂
我才写第三天的时候就遇到一个推荐数还算多的轮子停止维护了 得自己 fork 下来改着用!!!

正题

react-native-router-flux

这个插件具体是做什么的 网上介绍很多 入门也有 这篇文章主要讲解 其中 Drawer 组件的使用方法和技巧

吐槽: 官方文档 实在让人摸不着头脑 😂 总觉着很多 API 都默认用户是知道的 文档上都找不到的

Drawer 译为 抽屉 我更习惯称其为 侧边栏

本文引用代码: react-native-router-flux-drawer

引入

本人代码均基于 官方脚手架 创建 react-native-cli

yarn add react-native-router-flux

App.js

import React, { Component } from 'react';
import {
  StyleSheet,
} from 'react-native';
import {Scene, Router, Drawer} from 'react-native-router-flux'
import DrawerComp from './src/components/Drawer'
import Home from './src/containers/Home'


export default class App extends Component<{}> {
  render() {
    return (
        <Router style={styles.container}>
            <Scene key={'root'}>
                {/*默认 不隐藏导航栏 不好看*/}
                {/*<Drawer key={'Drawer'} contentComponent={DrawerComp} drawerPosition={'right'}>*/}
                    {/*<Scene key="Home" component={Home} title="首页"/>*/}
                {/*</Drawer>*/}

                {/*隐藏Drawer组件以及子视图的顶部导航栏 使用Actions.drawerOpen() ~.drawerClose()控制*/}
                <Drawer key={'Drawer'} hideNavBar={true} contentComponent={DrawerComp} drawerWidth={200} drawerPosition={'right'}>
                    <Scene key="Home" hideNavBar={true} component={Home} title="首页"/>
                </Drawer>
                
                {/*下面这种方法也可以*/}
                {/*<Scene drawer={true} key={'Drawer'} hideNavBar={true} contentComponent={DrawerComp} drawerPosition={'right'}>*/}
                    {/*<Scene key="Home" hideNavBar={true} component={Home} title="搜索"/>*/}
                {/*</Scene>*/}
            </Scene>
        </Router>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

src/containers/Home.js

import React, {Component} from 'react'
import {Button, SafeAreaView} from 'react-native'

// 控制父级 Drawer 的 Actions 也是整个 RNRF 的控制器
import {Actions} from 'react-native-router-flux'

export default class Home extends Component {
    _openDrawer = () => {
        // 关闭用 Actions.drawerClose()
        Actions.drawerOpen()
    };

    render() {
        return (
            <SafeAreaView style={{flex: 1}}>
                <Button onPress={this._openDrawer} title={'OpenDrawer'}/>
            </SafeAreaView>
        )
    }
}

src/components/Drawer.js

import React, {Component} from 'react'
import {Button, Text, SafeAreaView} from 'react-native'
import {Actions} from 'react-native-router-flux'
export default class Drawer extends Component {
    render() {
        return (
            // SafeAreaView 适配 iPhoneX 的 会自动添加安全区域 可以试试换成View 然后在模拟器或者真机下跑 内容会占据顶部状态栏 加了则会自动加上边距 把内容顶下来
            <SafeAreaView style={{flex: 1}}>
                <Text>
                    Drawer 容器
                </Text>
                <Text>
                    可以通过 redux 来定制内部的内容 实现淘宝的侧边栏分类动态更换
                </Text>
                <Text>
                    有时间我会抽离我自己写的 通过 Redux 控制内容的 demo
                </Text>
                {/*在Drawer内关闭自己*/}
                <Button onPress={() => {
                    Actions.drawerClose()
                }} title={'Close me'}/>
            </SafeAreaView>
        )
    }
}

效果图(GIF的卡顿实际不存在)

demo代码: react-native-router-flux-drawer

结语

时间比较紧 这次仅仅是介绍简单的控制 下次会结合 Redux 来动态更新 Drawer 内容