Chắc hẳn đến 90% các ứng dụng hiện nay đều sử dụng MenuSide và React-Native cũng có thể tạo ra được MenuSide, trong bài hôm nay chúng ta sẽ học cách tạo ra một MenuSide.

I)Cài đặt:

Tạo một dự án mới có tên SideMenuDemo
Tiếp theo chúng ta sẽ tải node modun elements về:

npm i react-native-vector-icons --save && react-native link react-native-vector-icons
npm i react-native-elements --

Nếu trong quá trình cài đặt bạn gặp lỗi sau:

Thì bạn chạy lệnh sau:

npm install whatwg-fetch@^1.0.0 --save

II)Viết Mã

Ở file index.ios.js chúng ta cần import các thành phần cần sử dụng:

import React, { Component } from 'react'
import { View, ScrollView, AppRegistry} from 'react-native'
import {
  List,
  ListItem,
  SideMenu
} from 'react-native-elements'

Ở trong các phần trước mình có giới thiệu về ListView rồi đúng không, bài này chúng ta có 2 thành phần mới là ScrollView và SideMenu. Nếu bạn đã lập trình di động rồi thì chắc hẳn không còn lạ với ScrollView nữa, nó là một thành phần cho phép hiển thị dữ liệu lớn hơn phần thực chất màn hình thiết bị cho phép hiển thị.

Class SideMenuDemo được extends từ Component và chúng ta bắt đầu viết các đoạn mã cho nó:

constructor () {
    super()
    this.state = {
      toggled: false
    }
    this.toggleSideMenu = this.toggleSideMenu.bind(this)
  }
  toggleSideMenu () {
    this.setState({
      toggled: !this.state.toggled
    })
  }

Đầu tiên với phương thức constructor() nó thuộc về component Lifecycle phần này mình sẽ trình bày riêng ở một bài khác. Vì ở trong bài này chúng ta sẽ cần một state để theo dõi người dùng có click vào menu hay không(theo docs của React nếu chúng ta cần khởi tạo state thì nên khai báo ở phương thức constructor).

Ở phương thức constructor mặc định bạn đầu tôi để trạng thái của menu là false.

this.toggleSideMenu = this.toggleSideMenu.bind(this)

Đoạn mã trên cho phép chỉ rõ ra nó sẽ sử dụng phương thức ở class nào ở đây tôi chọn là this, về phần Binding functions chúng sẽ được trình bày ở bài khác.

Tiếp theo ở phương thức render

const list = [
      {
        name: 'Amy Farha',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        subtitle: 'Vice President'
      },
      {
        name: 'Chris Jackson',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        subtitle: 'Vice Chairman'
      },
      {
        name: 'Amanda Martin',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
        subtitle: 'CEO'
      },
      {
        name: 'Christy Thomas',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
        subtitle: 'Lead Developer'
      },
      {
        name: 'Melissa Jones',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
        subtitle: 'CTO'
      }
    ]

Đầu tiên chúng ta cần tạo danh sách dữ liệu cần hiển thị ở đâu có 5 items sẽ được hiển thị bao gồm tên, ảnh, miêu ta.

Tiếp theo tạo biến MenuComponent là một biến chứa cấu trúc các thành phần sẽ được hiển thị trên menu

const MenuComponent = (
      <ScrollView style={{flex: 1, backgroundColor: '#ededed', paddingTop: 50}}>
        <List containerStyle={{marginBottom: 20}}>
        {
          list.map((l, i) => (
            <ListItem
              onPress={() => console.log('something')}
              avatar={l.avatar_url}
              key={i}
              title={l.name}
              subtitle={l.subtitle}
            />
          ))
        }
        </List>
      </ScrollView>
    )

Ở đây tôi dùng scrollview bao ở ngoài để cho phép người dùng có thể scroll.

Và cuối cùng chúng ta sẽ render ra cái menu với các thuộc tính truyền vào như sau:

return (
      <SideMenu
        toggled={this.state.toggled}
        MenuComponent={MenuComponent}>
      </SideMenu>
    )

Bây giờ các bạn chạy thì nó sẽ như sau:

Các bạn thấy nó đã hiện lên danh sách các thành phần trong menu nhưng nó đã hiển thị ra nhưng không ấn được. Để khắc phục điều này chúng ta cần 1 view home nữa các bạn tạo file Home.JS vào thêm đoạn mã sau:

import React, { Component } from 'react'
import { ScrollView, StyleSheet} from 'react-native'

import {
  Text,
  Button
} from 'react-native-elements'

class Home extends Component {
  render () {
    const { toggleSideMenu } = this.props
    return (
      <ScrollView style={{backgroundColor: 'black'}}>
        <Button
          buttonStyle={styles.button}
          onPress={() => toggleSideMenu()}
          title='TOGGLE SIDE MENU'/>
      </ScrollView>
    )
  }
}

let styles = StyleSheet.create({
  button: {
    marginTop: 64
  }
})

export default Home

Ở đây tôi cũng sử dụng 1 thành phần scrollview và một nút cho phép hiển thị menu side khi onPress thì nó sẽ đổi trạng thái. Trước khi chạy chúng ta cần thay đoạn mã sau vào index.ios.js

import Home from './Home'

Đoạn mã trên sẽ được đặt ở trên cùng của index.ios.js

Ở phương thức render chúng ta sử lại khi return như sau:

return (
      <SideMenu
        toggled={this.state.toggled}
        MenuComponent={MenuComponent}>
        <Home toggleSideMenu={this.toggleSideMenu} />
      </SideMenu>
    )

Bây giờ chạy thì sẽ được như sau:

Nhập môn với React Native phần 5(MenuSide)

I)Cài đặt:

II)Viết Mã

Các bạn có thể xem là bài về NavigationBar để chuyển cái nút lên thanh Navigationbar. Bài này vậy là hết, cảm ơn các bạn đã đọc.

Bình luận