私は反応するのが初めてです。 React-nativeでスライダーメニューを開発する必要があります。私は以下のリンクをたどりますが、それは私が望んでいません http://www.reactnative.com/a-slide-menu-inspired-from-Android-for-react-native/
実際にここに添付した画像が必要です。
私を助けてください..
このネイティブの反応パッケージはかなり広範囲に渡っており、使用するのは本当に素晴らしいことです。
https://github.com/root-two/react-native-drawer
これは私のコードのほんの一部です。openDrawerメソッドを呼び出すボタンを持つメニューバーを作成し、この引き出しを使用して、アニメーションを好きなように設定し、引き出し自体の中にスクロールビューを含めることができます。お役に立てれば!
var React = require('react-native');
var {
StyleSheet,
Component,
View,
Text,
Navigator,
TouchableHighlight,
TouchableOpacity,
} = React;
var styles = require('./styles');
var Drawer = require('react-native-drawer')
var drawerStyles = {
drawer: {
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 0,
}
}
var MainPage = React.createClass({
getInitialState: function(){
return {
drawerType: 'overlay',
openDrawerOffset:.3,
closedDrawerOffset:0,
panOpenMask: .1,
panCloseMask: .9,
relativeDrag: false,
panStartCompensation: true,
openDrawerThreshold: .25,
tweenHandlerOn: false,
tweenDuration: 550,
tweenEasing: 'easeInOutQuad',
disabled: false,
tweenHandlerPreset: null,
acceptDoubleTap: true,
acceptTap: true,
acceptPan: true,
rightSide: false,
showView: true,
}
},
setDrawerType: function(type){
this.setState({
drawerType: type
});
},
openDrawer: function(){
this.refs.drawer.open();
},
closeDrawer: function(){
this.refs.drawer.close();
},
setStateFrag: function(frag){
this.setState(frag);
},
render: function() {
var menu = <Menu
closeDrawer={this.closeDrawer}
navigator={this.props.navigator} />;
return (
<Drawer
ref="drawer"
onClose={this.onClose}
type={this.state.drawerType}
animation={this.state.animation}
openDrawerOffset={this.state.openDrawerOffset}
closedDrawerOffset={this.state.closedDrawerOffset}
panOpenMask={this.state.panOpenMask}
panCloseMask={this.state.panCloseMask}
relativeDrag={this.state.relativeDrag}
panStartCompensation={this.state.panStartCompensation}
openDrawerThreshold={this.state.openDrawerThreshold}
content={**YOURCUSTOMENU**}
styles={drawerStyles}
disabled={this.state.disabled}
tweenHandler={this.tweenHandler}
tweenDuration={this.state.tweenDuration}
tweenEasing={this.state.tweenEasing}
acceptDoubleTap={this.state.acceptDoubleTap}
acceptTap={this.state.acceptTap}
acceptPan={this.state.acceptPan}
changeVal={this.state.changeVal}
negotiatePan={false}
side={this.state.rightSide ? 'right' : 'left'}
>
<View>
<**YOURTOOLBAR** onPress={this.openDrawer}/>
<**YOURCONTENT_VIEW**/>
</View>
</Drawer>
);
},
});
module.exports = MainPage;
例 that react-native-router-flux コンポーネントを react-native-drawer に追加しました。このようにして、クロスプラットフォームとして簡単な足場を提供します。
私が理解していることから、あなたはスライダーメニューをhamburger button
。
react-native-navigation-drawer
これは、toogleSlideMenu
の- SliderMenu
関数で実現できます。
簡単な例は次のとおりです。
import React, {
View,
Text,
ScrollView,
} from 'react-native';
import SlideMenu from 'react-native-navigation-drawer';
var BasicExample = React.createClass({
render() {
return (
<View style={styles.container}>
<View>
<Text onPress={() => this._slideMenu.toogleSlideMenu()}> Your status bar </Text>
</View>
<SlideMenu
ref={(c) => this._slideMenu = c}
menu={<Menu />}
>
<View>
<Text>Your content</Text>
</View>
</SlideMenu>
</View>
);
}
});
var Menu = React.createClass({
render() {
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle={styles.contentContainer}
style={styles.scrollView}>
<Text>Gallery</Text>
<Text>Latest</Text>
<Text>Events</Text>
<Text>Update</Text>
</ScrollView>
</View>
);
}
});
この完全なサイドメニュープロジェクトは、githubで確認できます。このプロジェクトには、ToolbarAndroid、routes、DrawerLayoutAndroid、オーバーフローメニュー、その他のコンポーネントが含まれています。