ReactNative 优化一直是很头疼的事情.
很多人都说,它的性能相当于安卓2.0的时代.
尤其是ListView的复用功能现在一直没有出来.
下面我就针对导航来写一点点代码.
问题一：使用 navigator.push 点击跳转后，手指滑动可以返回上一页，但是打log发现并没有调用 pop 方法，而且还是可以滑动回去，根本原因暂不追究，上代码：
var data = null;
if(title === '首页'){
data = this.state.data;
}
return <Navigator
style={{flex:1}}
initialRoute={{
component: component,
title: title,
passProps:{
data: data
}
}}
configureScene={(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
}}
这个是主要的路由，后来发现关键在于：
return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
详细配置请看源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
HorizontalSwipeJumpFromRight: {
...BaseConfig,
gestures: {
jumpBack: {
...BaseRightToLeftGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
jumpForward: {
...BaseLeftToRightGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
pop: BaseRightToLeftGesture,
},
animationInterpolators: {
into: buildStyleInterpolator(FromTheLeft),
out: buildStyleInterpolator(FadeToTheRight),
},
},
关键就在 gestures:{} 里面，我们可以在源码里找到：
FadeAndroid: {
...BaseConfig,
gestures: null,
animationInterpolators: {
into: buildStyleInterpolator(FadeIn),
out: buildStyleInterpolator(FadeOut),
},
},
就不难发现，只要把gestures设置成null，就不能触摸返回了！
发现在网上找了很多文章,都没有写过清空路由的问题,也只是介绍了下API
API
initialRoute：定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。 initialRoute
必须是 initialRouteStack（路由栈）
中的一个路由。initialRoute
默认为 initialRouteStack
中最后一项
initialRouteStack：提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性，它将被默认设置成一个只含有 initialRoute
的数组
naviagtionBar：可选参数，提供一个在场景切换的时候保持的导航栏
navigator：可选参数，提供从父导航器获得的导航器对象
onDidFocus：每当导航切换完成或初始化之后，调用此回调，参数为新场景的路由
onWillFocus：会在导航切换之前调用，参数为目标路由器
renderScene：必要参数，用来渲染指定路由的场景。调用的参数是路由和导航器
如果你得到一个 navigator对象
的引用，则可以调用许多方法来进行导航getCurrentRoutes()：获取当前栈里的路由，也就是push进来，没有pop掉的那些
jumpBack()：跳回之前的路由，当前前提是保留现在的，还可以再跳回来，会给你保留原样
jumpForward()：上一个方法不是盗用之前的路由，用这个就可以跳回来了
push(route)：跳转到新场景，并且将场景入栈，你可以稍后跳转过去
pop()：跳转回去并且卸载掉当前场景
replace(route)：用一个新的路由替换掉当前场景
replaceAtIndex(route, index)：替换掉指定序列的路由场景
replacePrevious(route)：替换掉之前的场景
resetTO(route)：跳转到新场景，并且重置整个路由栈
immediatelyResetRouteStack(routeStack)：用新的路由数组来重置路由栈
popToRoute(route)：pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载
popToTop()：pop到栈中的第一个场景，卸载掉所有的其它场景
Paste_Image.png
好吧,时间有限,源码我就不贴出来了,请自行查看,后期我再详细补上.
清空路由的代码
在主控制器里这么创建
<Navigator
ref='navigator'
style={styles.navigator}
configureScene={this.configureScene}
renderScene={(route, navigator) => {
let Component = route.component;
return (
<Component navigator={navigator} route={route} {...route.passProps} />
)
} }
initialRouteStack={
[ {
component: Platform.OS === 'ios' ? Main : AndroidMain,
name: '主页'
}]
}
/>
注意这里要给个数组 如果initialRouteStack 没有的话,那就必须创建一个initialRoute
比如说 你调到2-3-4-5-6级页面后,你突然想反回首页.那么这时候你使用push的话就会入栈.
反复执行的话,内存就会迅速增加.
所以返回代码如下:
InteractionManager.runAfterInteractions()
{
this.props.navigator.immediatelyResetRouteStack(
[{
component: XXX,
}]
);
}
好了 清空所有路由 并且创建新的路由.稍微优化了一些功能.
网友评论