Sha*_*kil 7 integration deep-linking react-native redux react-navigation
在React Navigation中,可以通过将uriPrefixprop 传递给顶级导航器,或者通过将{containerOptions: {URIPrefix: PREFIX}}第二个参数传递给内置导航器(例如StackNavigator)来利用深度链接.
当Redux与React Navigation集成时,顶级导航器将传递给navigationprop.
但是,在RN应用程序上同时启用Redux和深度链接时.uriPrefix和navigationprop都需要传递给顶级导航器,这会引发错误,
这个导航器有导航和容器道具,因此不清楚它是否应该拥有自己的状态.
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;
Run Code Online (Sandbox Code Playgroud)
如何将Redux和深层链接(使用React Navigation)集成到RN应用程序中?
| 归档时间: |
|
| 查看次数: |
2521 次 |
| 最近记录: |