本文共 2123 字，大约阅读时间需要 7 分钟。

前提： 一个小web前端，完全不会android 跟iOS 的开发，首次接触，有很多不懂的问题。请见谅。

环境： win7

上一篇 ： 

1、目录结构

入口文件为 main.js、之所以不在 index.android.js 直接写 是因为本来 react-native 就是一套代码，运用在android 跟 iOS 平台上，所以只需要一个入口文件，分别在两个其他的文件中引入改入口文件就可以啦。

api 文件夹中放的是 请求接口的代码

component 文件夹中放置组件

config 中放置的是项目的相关配置

redux 文件夹中 分别用 actions / reducers / store 文件夹 放置 redux 的三个东西。

2、定义action

其中一个action

var courseInitState = {    courseList: [],    loading: true,};

3、把reducer分类，分别定义在不同的文件

其中一个reducer

export default function (state = courseInitState, action) {    switch (action.type) {                case 'GET_COURSE_LIST':             return {...state, courseList: action.courseList};        case 'COURSE_LOADING':             return {...state, loading: action.loading}        default:            return state;    }}

4、把reducers 在同一个文件内引入，并且合并

import { combineReducers } from 'redux';import previewReducer from './preview';import courseReducer from './course';import groupReducer from './group';import headReducer from './head';import videoRedecer from './video';var reducers = combineReducers({    previewReducer: previewReducer,    courseReducer: courseReducer,    groupReducer: groupReducer,    headReducer: headReducer,    videoRedecer: videoRedecer});export default reducers

5、传入 reducer 初始化 store

import { createStore, applyMiddleware,compose } from 'redux';import thunk from 'redux-thunk';import reducers from '../reducers'var store = createStore(    reducers,    compose(        applyMiddleware(thunk)    ))export default store;

6、在main 文件中引入 store

import React, { Component } from 'react';import { Provider } from 'react-redux';import PreviewList from './component/PreviewList';import stores from './redux/store';import GroupList from './component/GroupList';import Nav from './component/Nav';import {  StyleSheet,  View,  Text,} from 'react-native';const store = stores;function render() {    return (      
           
          
       );  }store.subscribe(function(){    render();});export default render

7、在入口文件 index.android.js 文件中注册一个app

import { AppRegistry } from 'react-native';import main from './main';AppRegistry.registerComponent('AwesomeProject', () => main);

转载地址：http://wseni.baihongyu.com/