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/…
Same old rule, first picture ~
Music playback
Video playback
The song list
The user interface
Radio details
Major technology stacks and dependencies on third-party libraries:
Click the name to jump to the related project website
- [email protected]
- [email protected]
- [email protected](Scroll TAB page component)
- [email protected]
- [email protected](contains many icon ICONS)
- [email protected](Video and audio player, after research, the latest version of Android and IOS can be used normally)
- [email protected](Recommended routing library)
- [email protected](the project focuses on functions related to player)
- Other details are omitted
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
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 1. Git clone https://github.com/yezihaohao/NeteaseCloudMusic.git 2. Yarn or NPM install 3. React-native run-ios or react-native run-Android
Copy 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 learned 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
MIT License.