Redux 集成

在使用 React Navigation 的应用程序中使用 Redux 非常容易。它与没有 React Navigation 时的使用方式基本相同。

import { Provider } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';

// Render the app container component with the provider around it
export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>{/* Screen configuration */}</NavigationContainer>
    </Provider>
  );
}

请注意，我们像在 react-redux 中一样，将组件包装在 Provider 中。就是这样！现在您可以随意在整个应用程序中使用 connect。

在 options 中使用一个 connect 过的组件

创建一个组件，将其 connect 到存储，然后在 title 中使用该组件。

function Counter({ value }) {
  return <Text>Count: {value}</Text>;
}

const CounterContainer = connect((state) => ({ value: state.count }))(Counter);

<Stack.Screen
  name="Test"
  component={TestScreen}
  options={{ title: () => <CounterContainer /> }}
/>

将您关心的状态作为参数传递给屏幕

如果该值预计不会更改，您可以将其从连接的组件作为参数传递到另一个屏幕。

<Button
  title="Go to static counter screen"
  onPress={() =>
    props.navigation.navigate('StaticCounter', {
      count,
    })
  }
/>

function StaticCounter({ route }) {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{route.params.count}</Text>
    </View>
  );
}

因此，我们的组件将如下所示

<RootStack.Screen
  name="StaticCounter"
  component={StaticCounter}
  options={({ route }) => ({ title: route.params.count })}
/>

我也可以将导航状态存储在 Redux 中吗？

这是不可能的。我们不支持它，因为它很容易导致自毁，并减慢或破坏您的应用程序。

但是，可以使用 redux-devtools-extension 检查 导航状态 和操作，以及使用 devtools 包 执行时间旅行调试。