1.制作TabBar

首先,创建一个新项目。

react-native init YCool

我们找到入口文件index.ios.js,将下面代码替换进去。

import React, { Component } from 'react';
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, combineReducers, compose} from 'redux'
import thunkMiddleware from 'redux-thunk'
import reducer from './app/reducers'
import AppContainer from './app/containers/AppContainer'

function configureStore(initialState) {
  const enhancer = compose(
    applyMiddleware(
      thunkMiddleware,
    ),
  );
  return createStore(reducer, initialState, enhancer);
}

const store = configureStore({});

import {
  AppRegistry,
} from 'react-native';

const App = () => (
  <Provider store={store}>
    <AppContainer />
  </Provider>
)

AppRegistry.registerComponent('YCool', () => App);

从下往上理解这段代码,AppRegistry模块是React Native应用JavaScript运行的入口。应用跟组件应用使用AppRegistry.registerComponent进行注册自己。然后原生系统就可以进行加载运行bundle文件包,最后就会可以调用AppRegistry.runApplication进行运行起来应用。
指向了APP,先来了解一下<Provider>,<Provider store> 使组件层级中的 connect() 方法都能够获得 Redux store。正常情况下,你的根组件应该嵌套在 <Provider> 中才能使用 connect() 方法。
在看一下store这个属性值,它指向了一个函数,这个函数返回了一个redux组件里的函数createStore()。顾名思义,它就是用来创建Store的。而Store又是做什么的呢?
Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。
这个时候我就理解了,首先我们先创建一个Store用来保存数据,然后再将它赋给<Provider>。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容