React Navigation：利用 Redux 的深度链接答案

【问题标题】：React Navigation: Utilizing deep linking with ReduxReact Navigation：利用 Redux 的深度链接
【发布时间】：2017-09-18 13:36:52
【问题描述】：

在 React Navigation 中，可以通过将 uriPrefix 属性传递给顶级导航器来使用深度链接，或者将 {containerOptions: {URIPrefix: PREFIX}} 作为第二个参数传递给内置导航器（例如 StackNavigator）。

当 Redux 与 React Navigation 集成时，顶级导航器会传递一个 navigation 属性。

但是，在 RN 应用上同时启用 Redux 和深度链接时。 uriPrefix 和 navigation prop 都需要传递给顶级导航器，这会引发错误，

这个导航器有导航和容器属性，所以它是不清楚它是否应该拥有自己的状态。

const S1 = () => <View><Text>S1 text</Text></View>;
const S2 = () => <View><Text>S2 text</Text></View>;
const S3 = () => <View><Text>S3 text</Text></View>;

const AppNav = StackNavigator(
  {
    S1: {screen: S1, path: 's1'},
    S2: {screen: S2, path: 's2'},
    S3: {screen: S3, path: 's3'}
  }
);

@connect(state => ({nav: state.nav}))
class App extends Component {
  render() {
    const
      { dispatch, nav } = this.props,
      uriPrefix = Platform.OS == 'android' ? 'http://localhost/' : 'http://';

    return (
      <AppNav
        navigation={addNavigationHelpers({dispatch: this.props.dispatch, state: this.props.nav})}
        uriPrefix={uriPrefix}
      />
    );
  }
}

const navReducer = (state, action) => (AppNav.router.getStateForAction(action, state) || state);
const rootReducer = combineReducers({nav: navReducer});

const RootApp = props =>
  <Provider store={createStore(rootReducer)}>
    <App />
  </Provider>;

export default RootApp;

如何将 Redux 和深度链接（使用 React Navigation）都集成到 RN 应用程序中？

【问题讨论】：

标签： react-native redux integration deep-linking react-navigation

【解决方案1】：

见@kristfal 评论 Redux can not be used with deep linking #1189.

或@grabbou comment.

【讨论】：

【解决方案2】：

我会利用 redux 商店。考虑想要深度链接到名为“Some Title”的书

将基本查询字符串参数传递给您的应用启动器，例如“?route=Store/books/some-title”
当应用加载时，使用查询字符串中的信息更新您的状态。如果您想变得花哨，可以使用 react 路由器完成大部分操作。

只要您的 redux 操作/reducer 设置正确，您的应用就应该加载带有“Some Title”一书的商店页面（同样，这是一个理论示例）

【讨论】：