Saturday, February 27, 2021
Lưu Xuân Trường's Blog
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
Lưu Xuân Trường's Blog
No Result
View All Result

How to add side menu wix-react-native-navigation

truongluu by truongluu
30/05/2020
in How to, React Native, React Native
Reading Time: 6min read
0 0
0
How to add side menu wix-react-native-navigation
0
SHARES
39
VIEWS
Share on FacebookShare on Twitter

Bài viết này mình sẽ không đề cập tới việc cấu hình và sử dụng wix/react-native-navigation nữa, phần này coi như các bạn đã biết hoặc tham khảo thêm trên offical documents. Mặc định thì Wix react native navigation cũng đã cung cấp cho chúng ta giải pháp về side menu, thật chất thì vẫn còn giới hạn và vẫn còn lỗi :). Bài viết này mình sẽ đi qua về side menu của Wix và một thư viện bên ngoài là React Native Navigation Drawer Extension. Let’s get started

Built-in Side menu của Wix react-native-navigation

Để sử dụng được built-in side menu của wix, mình có 3 thao tác sau:

  • Đăng ký component nào sẽ đóng vai trò side menu với hàm registerComponent của wix/react-native-navigation
  • Cấu hình side menu ở vị trí left, right
  • Thực hiện mã cho phép hiện thị side menu

Đăng ký Component đóng vai trò là side menu

Giả sử mình có 1 component có tên là LeftSideMenu với mã trong file LeftSideMenu.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react';
import { SafeAreaView, StyleSheet, View, Text } from 'react-native';
 
class LeftSideMenuScreen extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View>
          <Text>Left side menu content</Text>
        </View>
      </SafeAreaView>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    borderWidth: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center'
  }
})
 
export default LeftSideMenuScreen;

Sau khi tạo component trên, tiếp theo mình đăng ký với registerComponent

1
2
3
4
Navigation.registerComponent(
  'LeftSideMenu',
  () => LeftSideMenuScreen,
);

Cấu hình side menu hiện thị ở vị trí left, right của ứng dụng

Ở bước này, mình cấu hình bên trong hàm Navigation.setRoot, theo dõi đoạn mã bên dưới

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
Navigation.setRoot({
            root: {
                sideMenu: {
                    left: {
                        component: {
                            id:'leftSideMenu',
                            name: 'LeftSideMenu'
                        },
                    },
                    center: {
                        bottomTabs: {
                            options: {
                                bottomTabs: {
                                    titleDisplayMode: 'alwaysShow',
                                },
                            },
                            children: [{
                                stack: {
                                    children: [{
                                        component: {
                                            name: HOME,
                                            options: {
                                                topBar: {
                                                    visible: true,
                                                    title: {
                                                        text: 'Convert & download youtube to mp4',
                                                    },
                                                },
                                            },
                                        }
                                    }],
                                    options: {
                                        bottomTab: {
                                            text: 'Youtube2mp3',
                                            icon: homeIcon,
                                        },
                                    },
                                },
                            }, {
                                stack: {
                                    children: [{
                                        component: {
                                            name: ABOUT,
                                            options: {
                                                topBar: {
                                                    visible: true,
                                                    title: {
                                                        text: 'About',
                                                    },
                                                },
                                            },
                                        },
                                    }],
                                    options: {
                                        bottomTab: {
                                            text: 'About me',
                                            icon: infoIcon,
                                        },
                                    },
                                },
                            }],
                        },
                    }
                },
 
            },
        });

Lúc này, root sẽ chứa sideMenu, và bottomTabs của chúng ta sẽ dời vào thuộc tính center của side menu, các bạn theo dõi các cấp để thiết lập cho đúng nhé

Đoạn mã trên mình chỉ hiện thực là cấu hình leftSideMenu vào vị trí bên trái của ứng dụng và nó chỉ có ý nghĩa là đăng ký thôi, nếu bạn muốn 1 số cấu hình liên quan như: chiều rộng của side menu, mặc định có hiển thị không thì mình cấu hình thêm nhé. Đoạn mã bên dưới mình sẽ thêm cấu hình cho phần này

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
Navigation.setRoot({
            root: {
                sideMenu: {
                    left: {
                        component: {
                            id:'leftMenuSide',
                            name: 'LeftMenuSide'
                        },
                    },
                    center: {
                        bottomTabs: {
                            options: {
                                bottomTabs: {
                                    titleDisplayMode: 'alwaysShow',
                                },
                            },
                            children: [{
                                stack: {
                                    children: [{
                                        component: {
                                            name: HOME,
                                            options: {
                                                topBar: {
                                                    visible: true,
                                                    title: {
                                                        text: 'Convert & download youtube to mp4',
                                                    },
                                                },
                                            },
                                        }
                                    }],
                                    options: {
                                        bottomTab: {
                                            text: 'Youtube2mp3',
                                            icon: homeIcon,
                                        },
                                    },
                                },
                            }, {
                                stack: {
                                    children: [{
                                        component: {
                                            name: ABOUT,
                                            options: {
                                                topBar: {
                                                    visible: true,
                                                    title: {
                                                        text: 'About',
                                                    },
                                                },
                                            },
                                        },
                                    }],
                                    options: {
                                        bottomTab: {
                                            text: 'About me',
                                            icon: infoIcon,
                                        },
                                    },
                                },
                            }],
                        },
                    },
                    options: {
                        sideMenu: {
                            left: {
                                width: 400,
                                visible: true
                            }
                        }
                    }
                },
 
            },
        });

Mình có thêm thuộc tính options: { sideMenu: { left:.. }} để cấu hình cho width và visible của left menu (chiều rộng mình dùng số được thôi nha các bạn, mình không dùng phần trăm được)

Thực hiện mã cho phép hiện thị side menu

Ở phần center của sideMenu mình có layout như hình lúc đầu. Ở layout HomeScreen, mình cần tạo 1 hambuger icon và thêm sự kiện click vào hamburger icon sẽ hiện thị menu trái. Mặc định thì khi đăng ký left side menu thì mình có thể kéo ra vào left side menu được nha các bạn. File HomeScreen mình có mã sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import { useNavigationButtonPress } from 'react-native-navigation-hooks';
import { Navigation } from 'react-native-navigation';
 
const HomeScreen = ({ componentId }) => {
  useNavigationButtonPress((_) => {
  }, componentId, 'leftSideMenuButton');
 
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.heading1}>Home screen</Text>
      </View>
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
 
HomeScreen.options = {
  topBar: {
    leftButtons: {
      id: 'leftSideMenuButton',
      icon: require('../assets/ham-icon.jpg')
    }
  }
}
 
export default HomeScreen;
Left side menu và sau khi được kéo ẩn đi

Do ban đầu ta cấu hình cho left side menu visible nên nó hiện ngay lúc khởi động ứng dụng, Ở màn hình HomeScreen trên mình đã tạo sẵn 1 button ở vị trí left để khi bấm vào đó mình hiện thực mã cho show left side menu. Các bạn theo dõi mã bên dưới lúc mình click vào button với id là leftSideMenuButton

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import { useNavigationButtonPress } from 'react-native-navigation-hooks';
import { Navigation } from 'react-native-navigation';
 
const HomeScreen = ({ componentId }) => {
  useNavigationButtonPress((_) => {
    Navigation.mergeOptions(componentId, {
      sideMenu: {
        left: {
          visible: true
        }
      }
    })
  }, componentId, 'leftSideMenuButton');
 
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.heading1}>Home screen</Text>
      </View>
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
 
HomeScreen.options = {
  topBar: {
    leftButtons: {
      id: 'leftSideMenuButton',
      icon: require('../assets/ham-icon.jpg')
    }
  }
}
 
export default HomeScreen;

Với đoạn mã khi click vào button, mình gọi mergeOptions cho leftSideMenu visible bằng true là nó hiện left side menu lên à.

Với right menu side các bạn cấu hình tương tự left, thay left bằng right

Do built-in side menu của wix/react-native-navigation còn nhiều hạn chế, hiện tại phiên bản mới nhất mình vẫn thấy có 1 issue trên ios là overlay bị đè lên không đúng, mình chỉ xử dụng được ở mức như mình đã thao tác ở trên, và kèm theo 1 số cấu hình đơn giản, nên mình chỉ đề cập tới đây

React native navigation drawer extension

Image from network

Với react native navigation drawer extension này thì mình có nhiều tùy chọn hơn nhé các bạn, và rất dễ sử dụng các bạn có thể coi thêm trên documents của nó. React native navigation drawer extension ra đời nhằm khắc phục side menu của wix hạn chế. happy coding 🙂

Tags: React Native Navigation Drawere Extensionreact-native-navigationside menuwixwix/react-native-navigation
Previous Post

How to use Mobx with create-react-app

Next Post

The Ultimate Guide to React Native Optimization is out now!

truongluu

truongluu

Next Post
The Ultimate Guide to React Native Optimization is out now!

The Ultimate Guide to React Native Optimization is out now!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Life is a journey, not a destination

Ralph Waldo Emerson

Quotations

About me

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

Recent Posts

  • Code push in React Native
  • What’s middleware? How does it work?
  • Styled components trong ReactJS
  • Frontity cơ bản phần I (Tạo và chạy dự án)
  • React framework for WordPress

Recent Comments

  • truongluu on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Hung on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Redux Saga phần III (Tips khi làm việc) - Lưu Xuân Trường's Blog on Quản lý trạng thái tải khi dùng redux-saga
  • Redux Saga phần II (Các khái niệm cơ bản) - Lưu Xuân Trường's Blog on Cheatsheets Non Blocking, Blocking Redux Saga
  • truongluu on Giới thiệu về UmiJS P4 (Server Side Rendering)

Archives

  • February 2021
  • January 2021
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • March 2020
  • February 2020
  • January 2020
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • April 2018
  • March 2018

Categories

  • AdonisJS
  • Angular
  • Arduino
  • Backend
  • Câu Hỏi Phỏng Vấn
  • CSS
  • Ebook
  • Frontend
  • Frontity
  • Góc Ngoài Lề
  • How to
  • IOS
  • IQ Test
  • Javascript
  • Kinh nghiệm
  • Kinh nghiệm làm việc
  • Máy chủ
  • Mobile
  • MongoDB
  • NestJS
  • NodeJS
  • NuxtJS
  • Plugins
  • React Native
  • React Native
  • ReactJS
  • Redis
  • Redux-Saga
  • RxJS
  • Tutorials
  • UmiJS
  • Uncategorized
  • VueJS
  • WordPress

Friends

Phu's blog
  • RxJS toàn tập (P1 giới thiệu RxJS là gì)

    RxJS toàn tập (P1 giới thiệu RxJS là gì)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)

    0 shares
    Share 0 Tweet 0
  • Redux Saga phần I (Giới thiệu)

    0 shares
    Share 0 Tweet 0
  • Một số câu hỏi phỏng vấn frontend developer

    0 shares
    Share 0 Tweet 0

About me

Lưu Xuân Trường

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

© 2020 https://luuxuantruong.info

No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ

© 2020 https://luuxuantruong.info

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In