React-Native中的导航抽屉 [英] Navigation Drawer in React-Native
本文介绍了React-Native中的导航抽屉的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是本机反应的新手，不要介意我问一个基本问题，我想知道，实现导航抽屉的分步过程是什么?
引用链接此链接
我无法将其集成.
任何实施抽屉的演示项目也将起作用.任何与此有关的帮助都将很棒.
谢谢
解决方案
React native中导航抽屉的实现如下:
index.ios.js
'use strict';从'react-native'导入React，{AppRegistry}；从"./components/App"导入应用；AppRegistry.registerComponent('ReactNativeProject'，()=> App); App.js :
严格使用"从'react'导入React，{组件};从'react-native'导入{DeviceEventEmitter，Navigator，Text，TouchableOpacity，View};从'react-native-drawer'导入抽屉；从'react-native-vector-icons/MaterialIcons'导入图标；从'fbemitter'导入{EventEmitter};从'./Menu'导入菜单；从"./HomePage"导入HomePage从"./ProfilePage"导入ProfilePage从'../helpers/navigation'导入navigationHelper;从'../styles/root'导入样式；让_emitter = new EventEmitter();App类扩展了组件{componentDidMount(){var self = this;_emitter.addListener('openMenu'，()=> {self._drawer.open();});_emitter.addListener('back'，()=> {self._navigator.pop();});}使成为() {返回 (<抽屉ref = {(ref)=>this._drawer = ref}type ="overlay"content = {<菜单导航= {(路线)=>{this._navigator.push(navigationHelper(route));this._drawer.close()}}/>}tapToClose = {true}openDrawerOffset = {0.2}panCloseMask = {0.2}closeDrawerOffset = {-3}样式= {{抽屉:{shadowColor:#000000"，shadowOpacity:0.8，shadowRadius:3}，主要:{paddingLeft:3}}}tweenHandler = {(ratio)=>({主要:{opacity:(2-ratio)/2}})}><导航器ref = {(ref)=>this._navigator = ref}configureScene = {(route)=>Navigator.SceneConfigs.FloatFromLeft}initialRoute = {{id:首页"，标题:首页"，索引:0}}renderScene = {(route，navigator)=>this._renderScene(路线，导航器)}navigationBar = {< Navigator.NavigationBarstyle = {styles.navBar}routeMapper = {NavigationBarRouteMapper}/>}/></抽屉>);}_renderScene(路线，导航器){开关(route.id){案例首页":返回(< HomePage navigator = {navigator}/>);案例"ProfilePage":返回(< ProfilePage navigator = {navigator}/>);}}}const NavigationBarRouteMapper = {LeftButton(路线，导航器，索引，navState){开关(route.id){案例首页":返回 (<可触摸的不透明度style = {styles.navBarLeftButton}onPress = {()=>{_emitter.emit('openMenu')}}><图标名称='菜单'大小= {25}颜色= {'白色'}/></TouchableOpacity>)默认:返回 (<可触摸的不透明度style = {styles.navBarLeftButton}onPress = {()=>{_emitter.emit('back')}}><图标名称=人字形左"尺寸= {25}颜色= {'白色'}/></TouchableOpacity>)}}，RightButton(路线，导航器，索引，navState){返回 (<可触摸的不透明度style = {styles.navBarRightButton}><图标名称='更多版本'size = {25}颜色= {'白色'}/></TouchableOpacity>)}，标题(路线，导航器，索引，navState){返回 (<文本样式= {[styles.navBarText，styles.navBarTitleText]}>{route.title}</文本>)}}导出默认应用程序； Menu.js
import'react'中的React，{组件};从'react-native'导入{ListView};从'react-native-button'导入Button；从"../styles/menu"导入样式var _navigate;类菜单扩展了组件{构造函数(道具){超级(道具);this.state = {dataSource:新的ListView.DataSource({rowHasChanged:(row1，row2)=>第1行！==第2行})};_navigate = this.props.navigate;}componentDidMount(){this.setState({dataSource:this.state.dataSource.cloneWithRows(['HomePage'，'ProfilePage'])});}_renderMenuItem(item){返回(<按钮样式= {styles.menuItem} onPress = {()=>this._onItemSelect(item)}> {item}</Button>);}_onItemSelect(item){_navigate(item);}使成为() {返回 (<列表视图style = {styles.container}dataSource = {this.state.dataSource}renderRow = {(item)=>this._renderMenuItem(item)}/>);}}module.exports =菜单; ProfilePage.js
import'react'中的React，{组件};从'react-native'导入{View，Text};从"../styles/home"导入样式类ProfilePage扩展了Component {使成为(){返回 (<查看样式= {styles.container}><文本>个人资料页面</文本></View>);}}module.exports = ProfilePage; HomePage.js
import'react'中的React，{组件};从'react-native'导入{View，Text};从"../styles/home"导入样式HomePage扩展Component {使成为(){返回 (<查看样式= {styles.container}><文本>首页</文本></View>);}}module.exports =主页； navigation.js
从'react-native'导入React，{Platform};从下划线"导入_；module.exports =函数(场景){var componentMap = {'主页': {标题:首页"，id:首页"}，'个人资料页': {标题:"ProfilePage"，id:"ProfilePage"}}返回componentMap [scene];} I am a newbie in react-native, Dont mind if i ask a basic question, i wanted to know, what is the step by step procedure to implement navigation drawer.
Referred Links this Link
I am not able to integrate it.
Any Demo project implementing drawer will also work. Any help regarding this will be great.
Thankyou
解决方案
Implementation of navigation drawer in react native as follows:
index.ios.js
'use strict';
import React, { AppRegistry } from 'react-native';
import App from './components/App';
AppRegistry.registerComponent('ReactNativeProject', () => App);
App.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;
Menu.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;
ProfilePage.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;
HomePage.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;
navigation.js
import React, { Platform } from 'react-native';
import _ from 'underscore';
module.exports = function (scene) {
var componentMap = {
'HomePage': {
title: 'HomePage',
id: 'HomePage'
},
'ProfilePage': {
title: 'ProfilePage',
id: 'ProfilePage'
}
}
return componentMap[scene];
}
这篇关于React-Native中的导航抽屉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
