Think about the fact that I haven’t updated my blog for some time. I’m a little busy with my work. In fact, the author has been practicing in a project. On the other hand, the author has bought a domain name and built his own home through hard work. Welcome to visit! (author’s nest portal), future articles will be written in their own nest as the first.

Project background

The project I practiced was an APP related to movies realized through douban public API. The main functions are recommendation, search, login, details, etc. Since I just finished my first RN exercise, it is inevitable that I am unfamiliar and not skilled in technology. I hope you can kindly advise me where there is something bad. This project is completed in two stages: In the first stage, RN’s built-in controls such as TabBarIOS, NavigatorIOS, Button and Image are used; In the second stage of reconstruction, some popular third-party controls such as react-native navigation, react-native img-cache and react-native button were used.

Project Video Introduction

The technology used

import app from './app/App'Copy the code

1.1, the App. Js source App on the one hand, actually registerScreens () method to register all of the Component, on the other hand. Use the Navigation startTabBasedApp launched the App, implements the UITabBar effect

import {Platform} from 'react-native'; import {Navigation} from 'react-native-navigation'; import {registerScreens,registerScreenVisibilityListener} from './Screens/index'; import Icons from './Assets/Icon'; // screen related book keeping registerScreens(); registerScreenVisibilityListener(); Const tabs = [{label: 'recommended', screen: '. Com. 'FlyOceanMovies. MovieList' icon: {uri: Icons. Star, scale, 4.6}, title: 'most'}, {label: 'the north American box office, the screen:'. Com. 'FlyOceanMovies. USBoxList, icon: {uri: Icons. Featured, scale: 1.1}, title: 'the north American box office,}, {label:' search, screen: '. Com. 'FlyOceanMovies. SearchForm' icon: {uri: Icons. Search, scale: 1.2}, title: 'search ',}]; // this will start our app Navigation.startTabBasedApp({ tabs, animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade', tabsStyle: { tabBarBackgroundColor: '#003a66', tabBarButtonColor: '#ffffff', tabBarSelectedButtonColor: '#ff505c', tabFontFamily: 'BioRhyme-Bold', }, appStyle: { tabBarBackgroundColor: '#003a66', navBarButtonColor: '#ffffff', tabBarButtonColor: '#ffffff', navBarTextColor: '#ffffff', tabBarSelectedButtonColor: '#ff505c', navigationBarColor: '#003a66', navBarBackgroundColor: '#003a66', statusBarColor: '#002b4c', tabFontFamily: 'BioRhyme-Bold', }, });Copy the code

MovieList, USBoxList, SearchForm, MovieDetail, Login interface, SearchResult page, main.js, CSS style, layout

MovieList itself implements the iOS equivalent of SegmentControl using animations in ReactNative.

There are some other concerns I have added comments in the code, you can have a detailed look at the code, because it includes all my two stages of the code, so you have to be patient.

conclusion

I have learned React Native for some time, but I am not very skilled in writing this project. I made a lot of mistakes and didn’t write very fast. But did not meet a pit have to stop to think about review to consolidate their knowledge did not master, so that they also improved a lot. So the journey of thousands of miles begins with a single step, the fastest way to master knowledge is to take action, find a project to start from 0, complete a project. I not only verified what I had learned, but also learned what I had not learned before and consolidated my new knowledge in writing projects.

Complete project code