React-navigation导航系统(3)-高级指南

本文主要是介绍React-navigation导航系统(3)-高级指南，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

tags: React-Native

Redux Intergration

http://www.jianshu.com/p/469976fb7fd3

为了在redux中处理app的navigation state,你可以传递你自己的navigation prop到一个navigator.你的navigation prop必须提供当前的state,还有就是处理navigation配置项的dispatcher.

使用redux,你的app state由reducer来定义.每一个navigation router都有一个reducer,叫做getStateForAction.下面是一在redux应用中使用navigators的简单实例:

import { addNavigationHelpers } from 'react-navigation';const AppNavigator = StackNavigator(AppRouteConfigs);const navReducer = (state, action) => {const newState = AppNavigator.router.getStateForAction(action, state);return newState || state;
};const appReducer = combineReducers({nav: navReducer,...
});@connect(state => ({nav: state.nav,
}))
class AppWithNavigationState extends React.Component {render() {return (<AppNavigator navigation={addNavigationHelpers({dispatch: this.props.dispatch,state: this.props.nav,})} />);}
}const store = createStore(appReducer);class App extends React.Component {render() {return (<Provider store={store}><AppWithNavigationState /></Provider>);}
}

一旦按照实例操作,navigation state就存储在redux的store中,这样就可以使用redux的dispatch函数来发起navigation的actions.

牢记在心,当一个navigator给定一个navigationprop,他将失去内部state的控制权.这意味着现在你来负责state的持久化,处理任何的深度链接,整合Back按钮等操作.

当你的navigator是巢式的时候,Navigation state自动从一个navigator传递到另一个navigator.注意,为了让子代navigator可以从父代navigator接收state,它应该定义为一个screen.

对应上面的实例,你可以定义AppNavigator包含一个巢式的TabNavigator:

 const AppNavigator = StackNavigator({Home: { screen: MyTabNavigator },
});

在这个实例中,一旦你在AppWithNavigationState中connect AppNavigator到Redux,MyTabNavigation将会自动接入到navigation state 作为navigtion的prop.

Web Integration

React Navigation routers工作在web环境下允许你和原生app共享导航的逻辑.绑定在react-navigation的视图目前只能工作在React Native下,但是在react-primitives项目中可能会有所改变.

示例程序

这个网站由React Navigation构建,使用了createNavigation和TabRouter.
看看网站的源代码app.js

app如何获得渲染参看server.js.在浏览器中,使用[BrowserAppContainer.js]来唤醒和获得渲染.

更多内容,很快呈现

不久会有详细的教程.

Deep Linking

这一部分指南中,我们将设置app来处理外部URIs.让我们从SimpleApp开始
getting start的指南

在这个示例中,我们想使用类似mychat://chat/Taylor的URI来打开我们的app,直接连接到Taylor的chat page.

Configuration

在前面我们定义了navigator想下面这样：

 const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});

我们想让path类似chat/Taylor链接到“Chat”screen,传递user作为参数.我们重新定义我们的chat screen使用一个path来告诉router需要匹配的path和需要提取的参数.这个路径配置为chat/:user.

 const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: {
    screen: ChatScreen,
    path: 'chat/:user',},
});

URI的前缀

下面配置navigation container来提取app的path.当配置在顶层navigator上的时候,我们提供containerOperations,

 const SimpleApp = StackNavigator({...
}, {containerOptions: {// on Android, the URI prefix typically contains a host in addition to schemeURIPrefix: Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://',},
});

iOS

基于mychat://URI图式配置原生的iOS app.
在SimpleApp/ios/SimpleApp/AppleDelegate.m

 // Add the header at the top of the file:
#import <React/RCTLinkingManager.h>// Add this above the `@end`:
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)urlsourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{return [RCTLinkingManager application:application openURL:urlsourceApplication:sourceApplication annotation:annotation];
}

在Xcode里,打开项目的simpleApp/ios/SimpleApp.xcodeproj.在边栏中选择项目导航到info tab.向下滑动到“URL Types”并且添加一个.在新的URL type,设定名称和url图式对应想导航到的url图式.

现在可以在Xcode中点击play,或者在命令行运行

react-native run-ios

为了在iOS中测试URI,在safari中打开mychat://chat/Taylor

Android

为了在Andorid中链接外链,可以在manifest中创建一个新的intent.
在SimpleApp/android/app/src/main/AndroidManifest.xml中MainActivity内添加新的VIEWtypeintent-filter.

 <intent-filter><action android:name="android.intent.action.VIEW" /><category android:name="android.intent.category.DEFAULT" /><category android:name="android.intent.category.BROWSABLE" /><data android:scheme="mychat"android:host="mychat" />
</intent-filter>

现在,重新运行:

 react-native run-android

在Android中测试intent操作,运行

 adb shell am start -W -a android.intent.action.VIEW -d "mychat://mychat/chat/Taylor" com.simpleapp

Screen tracking and analytics

这个实例中展示怎么做屏幕追踪并且发到Google Analytics.这个方法应用在其他的移动分析SDK也是可以的.

Screen tracking

当我们使用内建的navigation container,我们使用onNavigationStateChange来追踪screen.

 import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);// gets the current screen from navigation state
function getCurrentRouteName(navigationState) {if (!navigationState) {return null;}const route = navigationState.routes[navigationState.index];// dive into nested navigatorsif (route.routes) {return getCurrentRouteName(route);}return route.routeName;
}const AppNavigator = StackNavigator(AppRouteConfigs);export default () => (<AppNavigatoronNavigationStateChange={(prevState, currentState) => {const currentScreen = getCurrentRouteName(currentState);const prevScreen = getCurrentRouteName(prevState);if (prevScreen !== currentScreen) {// the line below uses the Google Analytics tracker// change the tracker here to use other Mobile analytics SDK.tracker.trackScreenView(currentScreen);}}}/>
);

使用Redux做Screen tracking

使用Redux的时候,我们可以写Redux 中间件来track screen.为了达到这个目的,我们从前面的部分重新使用getCurrenRouteName.

 import { NavigationActions } from 'react-navigation';
import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);const screenTracking = ({ getState }) => next => (action) => {if (action.type !== NavigationActions.NAVIGATE&& action.type !== NavigationActions.BACK) {return next(action);}const currentScreen = getCurrentRouteName(getState().navigation);const result = next(action);const nextScreen = getCurrentRouteName(getState().navigation);if (nextScreen !== currentScreen) {// the line below uses the Google Analytics tracker// change the tracker here to use other Mobile analytics SDK.tracker.trackScreenView(nextScreen);}return result;
};export default screenTracking;

创建Redux store并应用上面的中间件

在创建store的时候应用这个screenTracking的中间件.看看Redux Integration了解细节.

 const store = createStore(combineReducers({navigation: navigationReducer,...}),applyMiddleware(screenTracking,...),
);

这篇关于React-navigation导航系统(3)-高级指南的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---