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

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

最近对 Hybrid 开发比较感兴趣,之前接触了一段时间的 Weex 了解过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.openDrawer() ~.closeDrawer()控制*/}
                <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 内容