ReactNative 優(yōu)化一直是很頭疼的事情.
很多人都說,它的性能相當(dāng)于安卓2.0的時代.
尤其是ListView的復(fù)用功能現(xiàn)在一直沒有出來.
下面我就針對導(dǎo)航來寫一點點代碼.
問題一：使用 navigator.push 點擊跳轉(zhuǎn)后丙号，手指滑動可以返回上一頁先朦，但是打log發(fā)現(xiàn)并沒有調(diào)用 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;
}}
這個是主要的路由棉浸，后來發(fā)現(xiàn)關(guān)鍵在于：
return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;
詳細(xì)配置請看源代碼的: 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),
},
},
關(guān)鍵就在 gestures:{} 里面，我們可以在源碼里找到：
FadeAndroid: {
...BaseConfig,
gestures: null,
animationInterpolators: {
into: buildStyleInterpolator(FadeIn),
out: buildStyleInterpolator(FadeOut),
},
},
就不難發(fā)現(xiàn)刺彩，只要把gestures設(shè)置成null迷郑，就不能觸摸返回了！
發(fā)現(xiàn)在網(wǎng)上找了很多文章,都沒有寫過清空路由的問題,也只是介紹了下API
API
initialRoute：定義啟動時加載的路由创倔。路由是導(dǎo)航欄用來識別渲染場景的一個對象嗡害。 initialRoute
必須是 initialRouteStack（路由棧）
中的一個路由。initialRoute
默認(rèn)為 initialRouteStack
中最后一項
initialRouteStack：提供一個路由集合用來初始化畦攘。如果沒有設(shè)置初始路由的話則必須設(shè)置該屬性霸妹。如果沒有提供該屬性，它將被默認(rèn)設(shè)置成一個只含有 initialRoute
的數(shù)組
naviagtionBar：可選參數(shù)知押，提供一個在場景切換的時候保持的導(dǎo)航欄
navigator：可選參數(shù)叹螟，提供從父導(dǎo)航器獲得的導(dǎo)航器對象
onDidFocus：每當(dāng)導(dǎo)航切換完成或初始化之后，調(diào)用此回調(diào)朗徊，參數(shù)為新場景的路由
onWillFocus：會在導(dǎo)航切換之前調(diào)用首妖，參數(shù)為目標(biāo)路由器
renderScene：必要參數(shù)，用來渲染指定路由的場景爷恳。調(diào)用的參數(shù)是路由和導(dǎo)航器
如果你得到一個 navigator對象
的引用有缆，則可以調(diào)用許多方法來進行導(dǎo)航getCurrentRoutes()：獲取當(dāng)前棧里的路由，也就是push進來温亲，沒有pop掉的那些
jumpBack()：跳回之前的路由棚壁，當(dāng)前前提是保留現(xiàn)在的，還可以再跳回來栈虚，會給你保留原樣
jumpForward()：上一個方法不是盜用之前的路由袖外，用這個就可以跳回來了
push(route)：跳轉(zhuǎn)到新場景，并且將場景入棧魂务，你可以稍后跳轉(zhuǎn)過去
pop()：跳轉(zhuǎn)回去并且卸載掉當(dāng)前場景
replace(route)：用一個新的路由替換掉當(dāng)前場景
replaceAtIndex(route, index)：替換掉指定序列的路由場景
replacePrevious(route)：替換掉之前的場景
resetTO(route)：跳轉(zhuǎn)到新場景曼验，并且重置整個路由棧
immediatelyResetRouteStack(routeStack)：用新的路由數(shù)組來重置路由棧
popToRoute(route)：pop到路由指定的場景，在整個路由棧中粘姜，處于指定場景之后的場景將會被卸載
popToTop()：pop到棧中的第一個場景鬓照，卸載掉所有的其它場景
Paste_Image.png
好吧,時間有限,源碼我就不貼出來了,請自行查看,后期我再詳細(xì)補上.
清空路由的代碼
在主控制器里這么創(chuàng)建
<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: '主頁'
}]
}
/>
注意這里要給個數(shù)組 如果initialRouteStack 沒有的話,那就必須創(chuàng)建一個initialRoute
比如說 你調(diào)到2-3-4-5-6級頁面后,你突然想反回首頁.那么這時候你使用push的話就會入棧.
反復(fù)執(zhí)行的話,內(nèi)存就會迅速增加.
所以返回代碼如下:
InteractionManager.runAfterInteractions()
{
this.props.navigator.immediatelyResetRouteStack(
[{
component: XXX,
}]
);
}
好了 清空所有路由 并且創(chuàng)建新的路由.稍微優(yōu)化了一些功能.
