Code Monkey home page Code Monkey logo

zhihudaily-react-native's Introduction

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.

zhihudaily-react-native's People

Contributors

binggg avatar hkalexling avatar liaohuqiu avatar race604 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

zhihudaily-react-native's Issues

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.

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!

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

错误信息如下:
Installing APK 'app-debug.apk' on 'Google Nexus 5 - 5.0.0 - API 21 - 1080x1920 - 5.0'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 28.231 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
Starting the app (/usr/local/Cellar/android-sdk/24.1.2/platform-tools/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.

linux编译android版本,运行时出错

你好:
我这边在linux下搭建android的开发环境,按照官方的说明建立react native编译都其example都没有问题。在编译你这个客户端的代码时,没有错误信息。但是在运行时提示如下见附件。
不知道有没有出现过类似问题?能否给个思路?多谢了。
111

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

Error Android package name

application id and manifest root package are 'com.rctzhihudaily', while MainActivity locates at 'com.race604.zhihu.daily'

which may ends

Starting the app (/Users/yifan/dev/sdk/adt-bundle-mac-sdk/platform-tools/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.

安装后就报错了

2015-10-31_230823
你好,我在安装到模拟器上后,打开app就出现这个错误,我还没有改过代码,这是哪里出问题了,请教下,谢谢!

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

本地图片没有展示

按照文档中说的:

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项目了

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

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

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>

npm ERR! Error: failed to fetch from registry: react-timer-mixin

When running "npm install" in project root directory, error happen:

npm http GET https://registry.npmjs.org/react-native
npm http GET https://registry.npmjs.org/react-native-drawer
npm http GET https://registry.npmjs.org/react-native-viewpager
npm http GET https://registry.npmjs.org/react-timer-mixin

npm ERR! Error: failed to fetch from registry: react-timer-mixin
npm ERR!     at /usr/share/npm/lib/utils/npm-registry-client/get.js:139:12
npm ERR!     at cb (/usr/share/npm/lib/utils/npm-registry-client/request.js:31:9)
npm ERR!     at Request._callback (/usr/share/npm/lib/utils/npm-registry-client/request.js:136:18)
npm ERR!     at Request.callback (/usr/lib/nodejs/request/main.js:119:22)
npm ERR!     at Request.<anonymous> (/usr/lib/nodejs/request/main.js:212:58)
npm ERR!     at Request.emit (events.js:88:20)
npm ERR!     at ClientRequest.<anonymous> (/usr/lib/nodejs/request/main.js:412:12)
npm ERR!     at ClientRequest.emit (events.js:67:17)
npm ERR!     at HTTPParser.onIncoming (http.js:1261:11)
npm ERR!     at HTTPParser.onHeadersComplete (http.js:102:31)
npm ERR! You may report this log at:
npm ERR!     <http://bugs.debian.org/npm>
npm ERR! or use
npm ERR!     reportbug --attach /home/demon/Workspace/ZhiHuDaily-React-Native/npm-debug.log npm
npm ERR! 
npm ERR! System Linux 3.11.0-26-generic
npm ERR! command "node" "/usr/bin/npm" "install"
npm ERR! cwd /home/demon/Workspace/ZhiHuDaily-React-Native
npm ERR! node -v v0.6.12
npm ERR! npm -v 1.1.4
npm ERR! message failed to fetch from registry: react-timer-mixin
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /home/demon/Workspace/ZhiHuDaily-React-Native/npm-debug.log
npm not ok

编程错误

运行 react-native run-android 时提示

Could not install the app on the device , see the error above

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.

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不支持这个特性?或是其他?

image!splash 是如何加载的?

image

splashScreen中

 img = require('image!splash');

image !splash最终资源加载的是android/app/src/main/res 目录下的图片,请问使用Xcode 启动ios模拟器启动的话,为什么会加载到这边的资源呢? 谢谢

不知道为什么会卡顿

首页的文章列表,轻点下去后,都会卡一到两秒才进入阅读界面。研究了很久也没找出原因,有知道的吗?

react-native run-android失败,找不到MainActivity

Starting the app (F:\Android\android-sdk/platform-tools/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.

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

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

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

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

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

错误信息如下:
Installing APK 'app-debug.apk' on 'Google Nexus 5 - 5.0.0 - API 21 - 1080x1920 - 5.0'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 28.231 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
Starting the app (/usr/local/Cellar/android-sdk/24.1.2/platform-tools/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.

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?

如何处理。。。

splash的问题

在 xcode 项目中有默认的 launch screen,可以在 react native 中也有 splash,而且并没有移除 xcode 项目中的启动界面,是不是没有解决方案还是忘记处理了呢?
我试了下如果移除了 xcode 的启动界面,界面就不是全屏的了。
望解答!

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.