The is a Zhihu Daily App client, implemented using React Native.

Overview

Android Gems

ZhiHuDaily-React-Native

The is a Zhihu Daily App client, implemented using React Native. This project can run on both Android and iOS, with more than 80% of code in common. This is a demo project to show how to develop a complete app with React Native. (The data api is from ZhihuDailyPurify)

How does it look like?

  • The home page

  • The drawer

  • The content page

How to run

  1. Prepare your environment: Requirements and Android Setup
  2. Clone this repo, and goto the project root directory
  3. run npm install
  4. run react-native run-android
  5. Enjoy

Related content

In this project, I used most of technology in React Native:

  • Flex Style
  • Direct Manipulation
  • Native UI Components
  • DrawerLayoutAndroid
  • Image/Text/ListView
  • TouchableHighlight/TouchableNativeFeedback
  • ToolbarAndroid/Navigator
  • StyleSheet/ToastAndroid/BackAndroid
  • Timers
  • AsyncStorage
  • Animations
  • Customize view
  • ...

TODO

  1. Add local storage to cache data (done)
  2. Add List header banner (done)
  3. Add splash animation (done)
  4. Add swipe/pull to refresh (done)
  5. iOS compatible(done 80% of code in common)

License

This project is available under the MIT license.

Comments
  • react-native start的时候出错

    react-native start的时候出错

    git clone下来代码,进入root

    ➜  ZhiHuDaily-React-Native git:(master) npm install
    ➜  ZhiHuDaily-React-Native git:(master) react-native start
    Command `start` unrecognized. Did you mean to run this inside a react-native project?
    

    如何处理。。。

    opened by jianfengye 16
  • Debug in Chrome feature can not work in this project

    Debug in Chrome feature can not work in this project

    Hi,

    This is a great "react native" demo for android. With the latest version, when I enable the "debug in chrome" option. The app stop in the Welcome page. And can not render the home page.

    It bring a big challenge for dev debugging.

    Would you please help to take a look and provide a solution?

    Thanks & Regards, Ryan

    opened by laozhuang727 6
  • Error: Activity class {com.rctzhihudaily/com.rctzhihudaily.MainActivity} does not exist.

    Error: Activity class {com.rctzhihudaily/com.rctzhihudaily.MainActivity} does not exist.

    When I run the project of windows platform(Andriod) have a error: Activity class {com.rctzhihudaily/com.rctzhihudaily.MainActivity} does not exist. The project has being build successful . I has been see #12, but i am will not Java and i am is a rookie with 'React Native'. I hope download the project from git ,it run has not error. The error for a rookie is very difficult. Thank you!

    opened by jjskay 4
  • Using your custom native modules

    Using your custom native modules

    Hello Jing,

    Thank you for sharing your insights on creating android apps with RN. I'm impressed with your implementations of two custom native modules (webview & swiperefresh) that are not yet parts of the official release.

    Please can I re-use these modules? Can they be re-used as-is? Thank you.

    opened by tolu360 4
  • Error: Activity class {com.rctzhihudaily/com.rctzhihudaily.MainActivity} does not exist.

    Error: Activity class {com.rctzhihudaily/com.rctzhihudaily.MainActivity} does not exist.

    Try to run the project, but it says "Error type 3 Error: Activity class {com.rctzhihudaily/com.rctzhihudaily.MainActivity} does not exist.".Could anyone tell me how to fix this?

    opened by whmsysu 3
  • Request: publish / open source AndroidSwipeRefreshLayout

    Request: publish / open source AndroidSwipeRefreshLayout

    Seems like you guys have some pull to refresh mechanism built and working... I would love to see this published and open sourced, as there is nothing out there right now that works with Android

    Thanks!

          <AndroidSwipeRefreshLayout
            {...this.props}
            ref={RK_SWIPE_REF}
            style={styles.base}
            onRefresh={this._onRefresh}>
            {childrenWrapper}
          </AndroidSwipeRefreshLayout>
    
    opened by jforaker 2
  • ListView的Android版本不支持sticky-header特性么?

    ListView的Android版本不支持sticky-header特性么?

    官方文档对renderSectionHeader函数的说明 "If provided, a sticky header is rendered for this section. The sticky behavior means that it will scroll with the content at the top of the section until it reaches the top of the screen, at which point it will stick to the top until it is pushed off the screen by the next section header." 但是我在您的project里看到renderSectionHeader之后header内容是被render出来了但是在滚动的时候header并没有被sticky住,是不是Android版本的ListView不支持这个特性?或是其他?

    opened by misakuo 2
  • Can not run in real device

    Can not run in real device

    I clone this project and build. intstall in real device but can not run well.

    the error info is: invariant violation: application has not registered.this either due to a require() error during initialization or failure call appRegistry.registerConponent.

    and the click reload JS with error: Unable to download JS bundle

    how can resolve this problem

    opened by carl1990 2
  • 本地图片没有展示

    本地图片没有展示

    按照文档中说的:

    https://facebook.github.io/react-native/docs/image.html#content

    我将图片放入app/src/main/res/mipmap-xxhdpi/splash_logo.png

    在代码中使用:

    'use strict';
    
    var React = require('react-native');
    
    var {
      View,
      StyleSheet,
      Text,
      Image,
      Dimensions
    } = React;
    
    var WINDOW_WIDTH = Dimensions.get('window').width;
    
    var StartScreen = React.createClass({
    
        render: function() {
            return (
                <View style={styles.container2}>
                    <Image
                        style={styles.imagetop}
                        source={{uri:'http://img.qcds.com/ee978b96d3822476d4372dbe131d7f3a.jpg'}}
                    />
                    <Image
                        style={styles.imagedown}
                        source={require("image!ic_launcher")}
                    />
                </View>
            );
        }
    });
    
    
    var styles = StyleSheet.create({
        container2: {
            flex:1,
            flexDirection: 'column'
        },
        imagetop: {
            flex: 3,
            width: WINDOW_WIDTH,
        },
        imagedown: {
            flex:1,
            width: WINDOW_WIDTH,
        },
    });
    
    module.exports = StartScreen;
    

    发现的问题就是本地的图片没有展示,但是网络加载的图片有展示

    即imagedown没有显示出来。。。

    我也按照文档的说明,重新在Android Sudio中rebuild这个项目了,然后重新Run项目了

    不清楚还有哪里可能错了?

    求助,能不能帮忙看下有可能我哪里还有设置错误?

    opened by jianfengye 2
  • 请教如何设置点击回退回到上一级页面?

    请教如何设置点击回退回到上一级页面?

    参考代码,我理解只要维护一个回退的堆栈就可以在点击back健的时候设置回到上个activity?

    // 设置回退的堆栈
    var _navigator;
    BackAndroid.addEventListener('hardwareBackPress', function() {
        if (_navigator && _navigator.getCurrentRoutes().length > 1) {
            _navigator.pop();
            return true;
        }
        return false;
    });
    
    

    但是我设置了之后发现点击back都是退出app,@race604,能不能大致说下这种回退返回上一页是怎么做的?

    opened by jianfengye 2
  • I launch app show this error

    I launch app show this error

    Starting the app (adb shell am start -n com.rctzhihudaily/.MainActivity)... Starting: Intent { cmp=com.rctzhihudaily/.MainActivity } Error type 3 Error: Activity class {com.rctzhihudaily/com.rctzhihudaily.MainActivity} does not exist.

    opened by hnrainll 2
  • 我遇到了一个很奇怪的问题,烦请进来看....

    我遇到了一个很奇怪的问题,烦请进来看....

    我运行github上的ReactNative项目时都会出现下面这种问题,网上百度说是android的环境有问题,但是我运行自己创建的ReactNative项目时却又可以正常运行,有认知道是什么原因么? Could not install the app on the device, read the error above for details. Make sure you have an Android emulator running or a device connected and have set up your Android development environment: https://facebook.github.io/react-native/docs/android-setup.html

    opened by zhangjinhuang 1
  • windows problem, solved

    windows problem, solved

    react-native run-android

    question:

    bundle: Created ReactPackager uncaught error Error: SyntaxError: C:/Users/apple/reactNative/node_modules/react-native-viewpager/ViewPager.js: Type annotations must come before default assignments, e.g. instead of age = 25: number use age: number = 25 (211:40)

    modify: _getPage(pageIdx: number, loop = false: boolean) { to _getPage(pageIdx: number, loop: boolean = false) {

    solved.

    maybe because of the nodejs version or something.

    opened by fcgll520 3
Owner
吴晶
吴晶
React-native-user-interface - Change React Native userinterface at runtime

react-native-user-interface change RN userinterface at runtime. Installation npm

Ahmed Eid 0 Jan 11, 2022
An E-Commerce android App whose frontend is implemented using Kotlin & XML files and backend/database is implemented using My SQL & PHP files

An E-Commerce android App whose frontend is implemented using Kotlin & XML files and backend/database is implemented using My SQL & PHP files

null 4 Aug 25, 2022
Matomo wrapper for React-Native. Supports Android and iOS. Fixed issues for native platforms build that are present in the official package.

@mccsoft/react-native-matomo Matomo wrapper for React-Native. Supports Android and iOS. Fixed issues for native platforms build that are present in th

MCC Soft 4 Dec 29, 2022
A react native interface for integrating payments using PayPal

react-native-paypal Getting started Installation npm install react-native-paypal Android Specific Add this to your build.gradle maven { url "https:

eKreative 14 Sep 25, 2022
Make SIP calls from react-native using Linphone SDK

react-native-sip Make SIP calls from react-native using Linphone SDK Installation npm install react-native-sip Usage import { multiply } from "react-n

Woonivers 2 Jun 30, 2022
A framework for building native applications using React

React Native Learn once, write anywhere: Build mobile apps with React. Getting Started · Learn the Basics · Showcase · Contribute · Community · Suppor

Meta 106.9k Jan 8, 2023
Taskify - An app to manage your daily tasks and boost your productivity. Taskify is built using kotlin and follows all modern android Development practices and hence is a good learning resource for beginners

Taskify Taskify is an app to manage your daily tasks and boost your productivity Video Introduction ?? This is a small introduction video about Taskif

Vaibhav Jaiswal 101 Jan 4, 2023
A daily horoscopes listing. App using my personality project's API and Jetpack Compose

A daily horoscopes listing. App using my personality project's API and Jetpack Compose. Application architecture based on MVVM and Clean Architecture

Hüseyin Serkan Özaydin 9 Aug 13, 2021
Vaibhav Jaiswal 57 Jan 3, 2023
Initiate immediate phone call for React Native on iOS and Android.

react-native-immediate-call-library Initiate immediate phone call for React Native on iOS and Android. Getting started Using npm: npm install react-na

null 7 Sep 7, 2022
Simple library to decompress files .zip, .rar, .cbz, .cbr in React Native.

Uncompress React Native Simple library to decompress files .zip, .rar, .cbz and .cbr in React Native. Installation yarn add uncompress-react-native o

Adriano Souza Costa 40 Nov 24, 2022
A 2020s compatible React Native keyboard avoiding view for Android and iOS that just works.

react-native-keyboard-shift Example Snack coming soon Until then: Clone this repo: git clone https://github.com/FullStackCraft/react-native-keyboard-s

Full Stack Craft 66 Aug 16, 2022
A demo for Android font typeface support in React Native!

A Step-by-step Guide to a Consistent Multi-Platform Font Typeface Experience in React Native Goal Be able to use font typeface modifiers such as fontW

Jules Sam. Randolph 53 Dec 23, 2022
NativeScript empowers you to access native platform APIs from JavaScript directly. Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.

NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile de

NativeScript 22k Dec 31, 2022
Wrapper for Kustomer SDK v2.0 for react native

This is a wrapper for Kustomer v2 Sdk for react native. This implements the kust

Shivam Rawat 2 Dec 30, 2021
🚀 React Native Segmented Control, Pure Javascript for iOS and Android

Installation Add the dependency: npm i react-native-segmented-control-2 Peer Dependencies Zero Dependency ?? Usage Import import SegmentedControl from

FreakyCoder 11 Nov 10, 2022
Library to read incoming SMS in Android for Expo (React Native)

react-native-expo-read-sms Maintainers maniac-tech Active maintainer Installation Install this in your managed Expo project by running this command: $

Abhishek Jain 15 Jan 2, 2023
React Native Stone SDK Implementation (Support for both Mobile and POS versions)

react-native-stone-pos Stone Android POS Native Module Installation Stone has a private packageCloud repository, so we need to have your token before

8Sistemas 9 Dec 10, 2022
An Animated Scrolling View for React Native applications, supported on both iOS and Android

react-native-focused-scroll An Animated Scrolling View for React Native applications, supported on both iOS and Android Preview react-native-focus-scr

Fatemeh Marzoughi (Saba) 3 Aug 12, 2022