Giter Club home page Giter Club logo

reactnativedemo's Introduction

Test

The UI design: https://www.figma.com/file/xh4iktpcpSaCPjJN9SMsDO/%E5%89%8D%E7%AB%AF%E6%B5%8B%E8%AF%95%E9%A2%98?nodeid=0%3A1

The live video: https://www.bilibili.com/video/BV1MU4y1V7aa/

Please provide the following:

  1. Design document to explain the technology choice, and your assumptions. For example, did you use any external library to help, and why?
  2. Source code in the GIT repository. You could use bitbucket, github or other similar service.
  3. Automated Test cases, if possible.
  4. If it is a mobile app, please provide a way to download and install the app for review. Alternatively, you could capture a movie of your mobile simulator if you cannot provide a downloadable app.
  5. Note: a. You could use the programming language that you are most familiar. b. Keep it simple and make it looks good โ˜บ

Solution

Tech stacks: React + React Native + TypeScript + Jest

  1. Use React Native to develop because it shares code across platforms. use some external libraries below to develop:
    1. react-native-code-push, which helps us to quickly hot update the App
    The CodePush plugin helps get product improvements in front of your end users instantly, by keeping your JavaScript and images synchronized with updates you release to the CodePush server. This way, your app gets the benefits of an offline mobile experience, as well as the "web-like" agility of side-loading updates as soon as they are available. It's a win-win!
    
    1. some navigation toolkits, such as @react-navigation/native and @react-navigation/native-stack and react-native-screens, React Navigation's native stack navigator provides a way for your app to transition between screens and manage navigation history.
    2. react-native-localize and i18n-js provide i18n function, besides there would be great if keep a GitHub submodule and take a circle ci to integrate multiple languages to make a smooth translation partition
    3. lodash-es, A modern JavaScript utility library delivering modularity, performance & extras. use it's memoize function in the code.
    4. react-native-linear-gradient provides the linear-gradient component
  1. you can go to ReactNativeDemo to check out the codebase.

  2. the simplest test case

  3. you can download the screen/app-release.apk and install it to review the demo, or you can watch the demo_en_video.mp4 and demo_zh_video.mp4 to review the demo.

Troubleshooting

I change the setting:

org.gradle.java.home=I:/code/openjdk-11.0.2_windows-x64_bin/jdk-11.0.2

to modify the jdk pointer in the /android/gradle.properties file. if you wanna establish the codebase by yourself, please change it base on your local machine env.

reactnativedemo's People

Contributors

albert-cord avatar

Stargazers

Roman avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.