用react-native开发知乎日报 1.搭建项目

本项目源码 lixiaoyang1992/zhihu

项目参考了f8 app 的设计。

所有 API 均由 知乎（Zhihu.Inc） 提供，参考开源项目izzyleung/ZhihuDailyPurify，获取与共享之行为或有侵犯知乎权益的嫌疑。若被告知需停止共享与使用，本人会及时删除此页面与整个项目。
请您了解相关情况，并遵守知乎协议。

一份代码，两个平台

既然要用react－native了，android和iOS当然要只写一份代码了。

初始化项目后，根目录创建js文件夹，作为我们的源码文件夹。

首先要统一首页，创建js/index.js

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class zhihu extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Double tap R on your keyboard to reload,{'\n'}
                    Shake or press menu button for dev menu
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

就是把初始代码挪了个位置。

把index.ios.js和index.android.js都改为

import index from './js/index'
import {
    AppRegistry
} from 'react-native';

AppRegistry.registerComponent('zhihu', ()=>index);

这样连个平台就使用同一份代码了。

redux

react要和官方推出的flux架构结合使用，redux是一种非常优秀的实现，在之前的文章中介绍过如何使用。