Question

我是反应原生的新手，不介意我问一个基本问题，我想知道，什么是逐步程序来实现导航抽屉。

推荐链接this Link

我无法整合它。

任何实现抽屉的演示项目也将起作用。任何有关这方面的帮助都会很棒。

三江源

Answer 1

导航抽屉的实现反应原生如下：

<强> index.ios.js

<强> App.js ：

'use strict';

import React, { AppRegistry } from 'react-native';
import App from './components/App';

AppRegistry.registerComponent('ReactNativeProject', () => App);

<强> Menu.js

'use strict'

import React, { Component } from 'react';
import { DeviceEventEmitter, Navigator, Text, TouchableOpacity, View } from 'react-native';

import Drawer from 'react-native-drawer';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { EventEmitter } from 'fbemitter';

import Menu from './Menu';
import HomePage from './HomePage'
import ProfilePage from './ProfilePage'

import navigationHelper from '../helpers/navigation';

import styles from '../styles/root';

let _emitter = new EventEmitter();

class App extends Component {
    componentDidMount() {
        var self = this;

        _emitter.addListener('openMenu', () => {
            self._drawer.open();
        });

        _emitter.addListener('back', () => {
            self._navigator.pop();
        });
    }

    render() {
        return (
            <Drawer
                ref={(ref) => this._drawer = ref}
                type="overlay"
                content={<Menu navigate={(route) => {
                    this._navigator.push(navigationHelper(route));
                    this._drawer.close()
                }}/>}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                closedDrawerOffset={-3}
                styles={{
                    drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
                    main: {paddingLeft: 3}
                }}
                tweenHandler={(ratio) => ({
                    main: { opacity:(2-ratio)/2 }
                })}>
                <Navigator
                    ref={(ref) => this._navigator = ref}
                    configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft}
                    initialRoute={{
                        id: 'HomePage',
                        title: 'HomePage',
                        index: 0
                    }}
                    renderScene={(route, navigator) => this._renderScene(route, navigator)}
                    navigationBar={
                        <Navigator.NavigationBar
                            style={styles.navBar}
                            routeMapper={NavigationBarRouteMapper} />
                    }
                />
            </Drawer>
        );
    }

    _renderScene(route, navigator) {
        switch (route.id) {
            case 'HomePage':
                return ( <HomePage navigator={navigator}/> );

            case 'ProfilePage':
                return ( <ProfilePage navigator={navigator}/> );
        }
    }
}

const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        switch (route.id) {
            case 'HomePage':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('openMenu')}}>
                        <Icon name='menu' size={25} color={'white'} />
                    </TouchableOpacity>
                )
            default:
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('back')}}>
                        <Icon name='chevron-left' size={25} color={'white'} />
                    </TouchableOpacity>
                )
        }
    },

    RightButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity
                style={styles.navBarRightButton}>
                <Icon name='more-vert' size={25} color={'white'} />
            </TouchableOpacity>
        )
    },

    Title(route, navigator, index, navState) {
        return (
            <Text style={[styles.navBarText, styles.navBarTitleText]}>
                {route.title}
            </Text>
        )
    }
}

export default App;

<强> ProfilePage.js

import React, { Component } from 'react';
import { ListView } from 'react-native';

import Button from 'react-native-button';

import styles from '../styles/menu'

var _navigate;
class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            })
        };
        _navigate = this.props.navigate;
    }

    componentDidMount() {
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(['HomePage', 'ProfilePage'])
        });
    }

    _renderMenuItem(item) {
        return(
            <Button style={styles.menuItem} onPress={()=> this._onItemSelect(item)}>{item}</Button>
        );
    }

    _onItemSelect(item) {
        _navigate(item);
    }

    render() {
        return (
            <ListView
                style={styles.container}
                dataSource={this.state.dataSource}
                renderRow={(item) => this._renderMenuItem(item)}
            />
        );
    }
}

module.exports = Menu;

<强> HomePage.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import styles from '../styles/home'

class ProfilePage extends Component {
    render(){
        return (
            <View style={styles.container}>
                <Text>Profile Page</Text>
            </View>
        );
    }
}

module.exports = ProfilePage;

<强> navigation.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import styles from '../styles/home'

class HomePage extends Component {
    render(){
        return (
            <View style={styles.container}>
                <Text>Home Page</Text>
            </View>
        );
    }
}

module.exports = HomePage;

Answer 2

首先，您需要安装react-navigation包： npm install --save react-navigation
为了让它更容易，更舒适，我将每行代码和注释放在 App.js 文件中

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';

// Create HomeScreen class. When 'Home' item is clicked, it will navigate to this page
class HomeScreen extends Component {
  render() {
      return <Text> Home Page </Text>
  }
} 

// Create ProfileScreen class. When 'Profile' item is clicked, it will navigate to this page
class ProfileScreen extends Component {
  render() {
    return <Text> Profile Page </Text>
  }
} 

// Create SettingsScreen class. When 'Settings' item is clicked, it will navigate to this page
class SettingsScreen extends Component {
  render() {
    return <Text> Settings Page </Text>
  }
} 

const RootNavigation = DrawerNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen},
  Settings: { screen: SettingsScreen}
});

export default class App extends Component {
  render() {
    return <RootNavigation />
  }
}

Here is my demo

Answer 3

从此处下载源代码（Navigation Drawer In React Native）

创建如下所示的导航抽屉菜单：

<?php $args = array('cat' => '3, 7, 10, 12', 'posts_per_page'=> 3); ?>
    <?php query_posts($args); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post();    ?>

            <article class="col-md-12">
                <a href="<?php the_permalink(); ?>" >
                    <div class="image"><img class="img-responsive" src="<?php echo the_post_thumbnail_url( 'medium' ); ?>"></div></a>
                    <div class="entry entry-table">
                        <div class="title">
                          <a href="<?php the_permalink(); ?>" ><h3 class="h5"><?php the_title(); ?></h3></a>
                          <span class="cateogry<?php echo get_the_category( $id )[0]->cat_ID; ?>"><?php echo get_the_category( $id )[0]->name; ?></span>
                       <p><?php echo get_excerpt(228, 'content'); ?>
                        <a class="linkmore" href="<?php the_permalink() ?>">Czytaj dalej ...</a>
                       </p>
                        </div>
                    </div>

            </article>

        <?php endwhile; endif; ?>

谢谢！

React-Native中的导航抽屉

3 个答案: