react-native,react-navigation 5 ,redux的集成
react-nativereact-navigationredux

在react-navigation 5之前的版本中,如果要使用redux ,则需要借助 react-navigation-redux-helpers 来实现的。但是从 5开始,不需要借助其他的组件就可以了。
之前的demo
https://www.ithere.net/article/264
https://www.ithere.net/article/265
在Dva demo的基础上,进行一个集成测试。
我们加一个DetailScreen 的文件

import * as React from 'react';
import {connect} from 'react-redux';
import {View, Text, Button} from 'react-native';

function DetailsScreen({navigation, count}) {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Details Screen{count}</Text>
            <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
        </View>
    );
}
export default connect(({count}) => ({
    count
}))(DetailsScreen);

再添加一个Router 文件

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import CountView from './views/count';
import DetailsScreen from './views/detailas';

const Router = () => {
    const Stack = createStackNavigator();

    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={CountView} />
                <Stack.Screen name="Details" component={DetailsScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};
export default Router;



入口文件改成

import React from 'react';
import {Provider} from 'react-redux';
import {create} from 'dva-core';
import CountModal from './models/CountModal';
import Router from './route';

const App = () => {
  const app = create();
  app.model(CountModal);
  app.start();
  const store = app._store;
  return (
    <Provider store={store}>
      <Router />
    </Provider>
  );
};
export default App;





image3.png

image4.png



通过结果可以看到,redux的在不同的页面之间的管理已经实现。

暂无评论