1、前提

安装以下这些包（[最新navigation安装看这个](react native 7 安装 react-navigation 6【安卓版】 - 掘金 (juejin.cn))

• redux(必须)
• react-redux(必须)
• @reduxjs/toolkit(必须)：官方推荐的，逻辑清晰的redux封装库，集成了redux-thunk

2、测试代码

// import Router from '@/router/newRouter';
// export default Router;

// 1、配置slice
import {createSlice} from '@reduxjs/toolkit';

interface CounterState {
  count: number;
}

const initialState = {count: 0} as CounterState;

const counterSlice = createSlice({
  name: 'counter', // 命名空间，在调用action的时候会默认的设置为action的前缀
  // 初始值
  initialState,
  // 这里的属性会自动的导出为actions，在组件中可以直接通过dispatch进行触发
  reducers: {
    increment(state, {payload}) {
      state.count = state.count + payload.step;
    },
    decrement(state) {
      state.count -= 1;
    },
  },
});

// 2、配置下store
import {configureStore} from '@reduxjs/toolkit';
// configureStore创建一个redux数据
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

// 3、配置navigation
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React from 'react';
import {connect, Provider} from 'react-redux';
import {Text, View, Button} from 'react-native';
import {useSelector, useDispatch} from 'react-redux';

// 创建Stack
const Stack = createNativeStackNavigator();
// 创建底部Tab
const Tab = createBottomTabNavigator();

function Listen() {
  return (
    <View>
      <Text>Listen</Text>
    </View>
  );
}

function Found() {
  return (
    <View>
      <Text>Found</Text>
    </View>
  );
}

function Account() {
  return (
    <View>
      <Text>Account</Text>
    </View>
  );
}

// 4、设置redux的值
function Home({navigation}: {navigation: any}) {
  const {count} = useSelector((state: any) => state.counter);
  const dispatch = useDispatch();
  const {increment} = counterSlice.actions;
  return (
    <View>
      <Text>Home</Text>
      <Button
        title="Go to Detail"
        onPress={() =>
          navigation.navigate('Detail', {
            id: 100,
          })
        }
      />
      <Text>加, {count}</Text>
      <Button
        title="加"
        onPress={() => {
          dispatch(increment({step: 2})); // dispatch派发action
        }}
      />
    </View>
  );
}

// 5、读取到redux的值
function Detail({route, value}: {route: any; value: any}) {
  // let {count} = useSelector(state => state.counter);
  return (
    <View>
      <Text style={{color: 'black'}}>
        这是详情223333333, {route.params?.id}
      </Text>
      <Text>这是从redux读取的----{value}</Text>
    </View>
  );
}

const DetailContainer = connect((state: any) => ({
  value: state.counter.count,
}))(Detail);

// 这是底部标签
function BottomTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: '首页',
          headerTitle: '首页',
        }}
      />
      <Tab.Screen
        name="Listen"
        component={Listen}
        options={{
          tabBarLabel: '我听',
          headerTitle: '我听',
        }}
      />
      <Tab.Screen
        name="Account"
        component={Account}
        options={{
          tabBarLabel: '我的',
          headerTitle: '我的',
        }}
      />
      <Tab.Screen
        name="Found"
        component={Found}
        options={{
          tabBarLabel: '发现',
          headerTitle: '发现',
        }}
      />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="BottomTabs"
            component={BottomTabs}
            // 隐藏bottomTabs默认的顶部标题栏
            options={{headerShown: false}}
          />
          <Stack.Screen name="Detail" component={DetailContainer} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

export default App;

3、效果图

4、测试版本

  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.1",
    "@reduxjs/toolkit": "^1.9.0",
    "react": "18.1.0",
    "react-native": "0.70.6",
    "react-native-config": "^1.4.11",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-navigation-redux-helpers": "^4.0.1",
    "react-redux": "^8.0.5",
    "redux": "^4.2.0"
  },