用到的插件如下:
"react-redux": "^5.0.6",//redux
"redux": "^3.7.2",//redux
"redux-logger": "^3.0.6",//redux 日志
"redux-thunk": "^2.2.0",//支持异步请求发送
"redux-devtools": "^3.4.0"//支持redux开发工具的Chrome插件
1.分别 npm install --save 插件名
2.新建Root文件,引入store文件,通过store,向APP中注入
import {Provider}from 'react-redux';
// 引入store文件,下步会创建
import configureStore from './store/ConfigureStore';
const store = configureStore();
import App from './App';
if (!__DEV__) {
global.console = {
info: () => {
},
log: () => {
},
warn: () => {
},
error: () => {
},
};
}
export default class Root extends Component {
constructor(props){
super(props);
this.state = {
}
}
render() {
return (
<Provider store={store}>
<App />
</Provider>
);
}
};
在App.js中引入connect
import {connect} from 'react-redux';
关联Navigation
export const MyApp = StackNavigator({
ReactNavigation:{screen:ReactNavigation,navigationOptions:{header:null}},
Main: {
screen: MainScreen,
path:'kingdom/:DeepLinkUser'
},
Main1: {
screen: MainScreen1,
path:'kingdom/:DeepLinkUser'
},
Main2: {
screen: MainScreen2,
path:'kingdom/:DeepLinkMain2'
},
Main3: {
screen: MainScreen3,
path:'kingdom/:DeepLinkMain2'
},
profile:{
screen: ProfileScreen,
}
},
{
initialRouteName:'ReactNavigation',
initialRouteParams :{
AppName:'KingdomYrt'
},
headerMode:'screen',
transitionConfig: (() => ({
screenInterpolator: CardStackStyleInterpolator.forHorizontal,
}))
});
//设置 URL's Schema,和 Host,这里注意箭头后面不要用“{}” 语法不识别。
const MainApp = () => <MyApp uriPrefix={'kingdomYrt://kingdomYrt/'} onNavigationStateChange={(prevNav, newNav, action) => {
console.group('Navigation Dispatchssss: ');
console.log('Action: ', action);
console.log('New State: ', newNav);
console.log('Last State: ', prevNav);
console.groupEnd();
nav.routes = newNav.routes;
}}/>
const AppWithNavigationState = ({ dispatch, nav }) => (
<MainApp navigation={addNavigationHelpers({ dispatch, state: nav })}/>
);
const mapStateToProps = state => ({
nav: state.nav,
});
export default connect(mapStateToProps)(AppWithNavigationState);
到此为止,基础组件引入已经完成
下一节我们将要讲述如何使用redux。