Menu
I need to use drawer from native base into react native app for both android ios et android. Here is the link for native base http://nativebase.io/docs/v2.0.0/components#drawer and below you'll find my code :
import { Container, Header, Title, Content, Button, Icon, Left, Body, Text } from 'native-base';
import { Drawer } from 'native-base';
import SideBar from '../components/SideBar';
class App extends Component {
closeDrawer = () => {
this._drawer._root.close();
}
openDrawer = () => {
alert('open');
this._drawer._root.open();
}
render() {
return (
<Container>
<Header style={{ backgroundColor: '#C0C0C0' }}>
<Left>
<Button transparent onPress={this.openDrawer.bind(this)}>
<Icon style={style.icon} name='menu' />
</Button>
</Left>
<Body style={style.body}>
<Title style={{ color: '#FFF'}}> title </Title>
</Body>
</Header>
<Content>
<Drawer
ref={(ref) => { this._drawer = ref; }}
content={<SideBar />} >
</Drawer>
</Content>
</Container>
);
}
the alert in the method open drawer is working fine, so i know it's not a problem in the button.
358
Create two separate classes "DashboardScreen" and "WelcomeScreen" in the react native app to display on screen. Add these screens to createStackNavigator and add "md-menu" icon of 'react-native-vector-icons/Ionicons' package. On pressing the menu icon, call navigation. openDrawer() method to open drawer.
The Button component is a fundamental UI element in any app. Buttons are used to indicate interactive actions on a screen, such as submitting a form. To render a button on the screen, use the Button component. To render text inside the button, add the Text component from native-base as a child.
Recommended by Awesome React Native NativeBase was added to the list of Frameworks of Awesome React Native and it is used by numerous React lovers across the world.
I believe you want to wrap everything in the drawer, like so
render() {
return (
<Drawer
ref={(ref) => { this._drawer = ref; }}
content={<SideBar />} >
<Container>
<Header style={{ backgroundColor: '#C0C0C0' }}>
<Left>
<Button transparent onPress={this.openDrawer.bind(this)}>
<Icon style={style.icon} name='menu' />
</Button>
</Left>
<Body style={style.body}>
<Title style={{ color: '#FFF'}}> title </Title>
</Body>
</Header>
<Content>
// Your other content here
</Content>
</Container>
</Drawer>
);
}
Also, on your self-made sidebar component - make sure it has a backgroundColor. Set it to something like #F0F0F0 otherwise it ends up looking mighty strange.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
