Here comes the ONE APP again!

I wrote another ONE. Don’t worry, I didn’t copy the code I wrote last time

This is ONE written in ReactNative.

The basic interface has been implemented, of course, there are some areas of the map is easy (can not be done) + the pursuit of speed writing Demo, naturally lead to:

  1. The next-best way to do it
  2. The code structure may not be very formal/clear
  3. There may be bugs (I don’t listen, I don’t listen)

Project Address => github.com/liuzho/ONE-…

My personal homepage => liuzho.com

Despite the fact that Kotlin has done a slaughtering of almost every community, I’m still Posting this Demo at the risk of being drowned out in case anyone sees it.

It’s okay, ReactNative has its charm! (all kinds of skills to you learn to care who you have the charm)…..

Did the Demo help you?

If you are a new RN student, your help may be limited, so please give a like/star for future study

If you are RN, please click on a like/star, take your time and make fun of me

If you have a background in RN and want to practice, please click “like”/” star “. You won’t learn much anyway

preview

Of course, international convention, dump preview picture:

Preview 1

Preview 2

Preview 3

It’s running on your computer

Here’s what you need to do:

  1. git clone https://github.com/liuzho/ONE-RN.git

  2. cd ONE-RN

  3. NPM install// Do not use CNPM! The CNPM cannot run due to the personal test

  4. react-native run-ios or react-native run-android

In theory, both iOS(testing is available, but some components like ToastAndroid don’t use yellow) and Android should work

Project situation

16.0.0 - alpha. "react" : "6", "the react - native" : "0.44.0", "the react - navigation" : "^ 1.0.0 - beta. 9"Copy the code

  1. Use of StackNavigator/TabNavigator

    What you can see: bottom Tab(TabNavigator), first Tab(viewPager-like slide), jump to user/search interface (StackNavigator)

    Why not use ViewPagerAndroid for the first Tab slide, since this component doesn’t work on iOS… GitHub should have a common component, but I’m not looking for it. Use TabNavgation

  2. The component information passed to the props/nav router carries data params these

    A Toolbar component is extracted, and the title display is handled via props/ Router, and StackNavigator’s router(project appNavigation) is handled via props to each interface/component

  3. Extraction of generic controls

    Toolbar, CdView, etc. (I didn’t do this deliberately, maybe I didn’t extract the controls that should have been extracted)

  4. Animation Animated

    I admit that there is actually a false loop rotation animation…. CdView click the button to rotate…

  5. The WebView loads the page and inserts JS code

    The content of the Detail page, because I wanted to finish the Demo quickly and thought that the interface writing was the same, I didn’t implement it myself. I directly used WebView to load the corresponding WebApp page, and then inserted my JS code through WebView. InjectJavaScript. ReoveChild removes all unwanted parts of the header and bottom of the content via element. reoveChild

  6. ListView and fetch are used

    I have written an article about the use of ListView and FETCH: ReactNative network fetch data and display in ListView

    So why didn’t I implement drop-down refresh, drop-down load, headerView, footerView on top of that? Because there is a FlatList that fully supports these practices! So why didn’t I use a FlatList? ! Because I discovered FlatList too late, I didn’t want to change the code I wrote earlier…. FlatList Chinese document

  7. I can’t think of anything else off the top of my head. What do you think you used? T_T not dozen

  8. Thanks API guys? Are you gonna show up this time?

    API: Poke here =>ONE API

    Note: If the rights of ONE are violated, I will delete all relevant content in a timely manner

  9. I’m going to keep it updated/polished for a while, as there are still some details to be worked out and a lot of tweaks to be made

conclusion

  • For more content please visit my homepage or my blog
  • ♡” ♡” keyword keyword keyword keyword keyword keyword keyword keyword
  • Of course, don’t forget to Star my warehouse => one-RN
  • Learning is to endure loneliness and step on the pit, more hands-on knocking can have more knowledge and experience and shoulder spine damage T_T