React Native mimics the netease Cloud music mobile client and is compatible with both Android and IOS platforms.

GitHub full source address github.com/yezihaohao/…

Old rules, first picture ~😄

The overview

The full

Music playback

Music playback

Video playback

Video playback

The song list

The song list

The user interface

The user interface

Radio details

Radio details

Major technology stacks and dependencies on third-party libraries:

Click the name to go to the related project website 😄😄

Ps: There will be minor bugs or conflicts in individual plug-ins. For example, swiper on Android does not allow manual scrolling in Scrollable TAB.

Main functional interface modules

Most of them are mainly demo. There are too many pages and functions on netease Cloud. Due to time constraints, we have not completed all functions, and other functions will be added successively.

  • The home page of each module is displayed
  • Music playback, including CD animation, lyrics synchronization, etc.
  • MV Video Playback
  • Personal Details Page
  • Other details and so on

Installation operation

Special note: The NeteaseCloudMusicApi provides a full set of apis. Run this API interface project on the local server or server and replace the IP address of BASE_URL under/SCR/API /index.js

0. Development environment platform version: Android-6.0 ios-10.3 1clonehttps://github.com/yezihaohao/NeteaseCloudMusic.git 2. yarn or npm install 3. react-native link 3. react-native run-ios Or the react - native run - androidCopy the code

conclusion

React – Native is easy to use. If you are familiar with React, read the react- Native documentation and open source projects, you can start developing react. However, there is poor backward compatibility.

The general presentation interface is easy, so familiarize yourself with the Flex layout and note the default vertical alignment.

Animation module also needs to focus on understanding, can improve user experience.

Check out other third-party components. There are plenty of others that have already written them, and read the React-Native update documentation as well.

Other details will be realized during the development process ~~😄😄😄

Just getting started with React-Native

The project will be continuously updated ~ all data used are for learning and communication only, and there is no other purpose. If in doubt, you can add front-end QQ group to communicate with me: 264591039