未完待續(xù)....
前言
先上效果圖：學(xué)習(xí)導(dǎo)航的時(shí)候麸折，網(wǎng)上的文章很多锡凝，但是看起來也越亂，學(xué)著學(xué)著就搞混了垢啼。沒有一個(gè)系統(tǒng)的從淺到深的學(xué)習(xí)窜锯。知識(shí)點(diǎn)也容易遺漏张肾。根據(jù)官網(wǎng)一步一步來，反而能夠快速掌握衬浑。
（什么英文看不懂捌浩？）我剛開始也是看著迷糊，但是下載一個(gè)有道翻譯工秩，不明白的單詞或者句子使用他翻譯下，慢慢就習(xí)慣啦
參考react-nvigation 2x文檔進(jìn)行學(xué)習(xí)进统。
官網(wǎng)資料
1)起步
2)create StackNavigator
3)config StackNavigator
4)界面跳轉(zhuǎn)助币，navigate,poptoTop,pop等
5)路由傳參
6)配置 head bar,導(dǎo)航
7)導(dǎo)航傳參
8)setParams傳參
9）自定義頭部樣式 header styles
10)分享公共的navigationOptions 配置
11）自定義組件代替標(biāo)題
12）header跳轉(zhuǎn)button
13)頭部按鈕訪問組件實(shí)例函數(shù)
14）full-screen model
1.起步
安裝指定版本 ：npm install react-navigation@2.9.1
2.create StackNavigator
import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
export default createStackNavigator({
Home: {
screen: HomeScreen
},
});
這樣就能簡單實(shí)現(xiàn)一個(gè)首頁啦。當(dāng)然這樣代碼多了就不好啦螟碎。每個(gè)界面寫成.js眉菱，在導(dǎo)入。增加一個(gè)details.js,自己動(dòng)手創(chuàng)建一個(gè)吧掉分，我們就可以這樣寫啦
3.config StackNavigator
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
export default class App extends React.Component {
render() {
return <RootStack />;
}
}
界面跳轉(zhuǎn)俭缓，navigate,poptoTop,pop等
在首頁中增加一個(gè)按鈕，點(diǎn)擊按鈕跳轉(zhuǎn)到詳情
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('Details')}
/>
</View>
);
}
}
在詳情界面酥郭，我們也增加一個(gè)按鈕华坦，來跳轉(zhuǎn)到首頁，看看啥效果不从？
DetailsScreen
...
<Button
title="Go to Details... again"
onPress={() => this.props.navigation.navigate('Details')}
/>
...
發(fā)現(xiàn)點(diǎn)擊跳轉(zhuǎn)不了惜姐。這里就涉及到其他知識(shí)點(diǎn)：
navigate（‘name’）,跳轉(zhuǎn)到新界面，如果已在當(dāng)前name界面椿息，就不在跳轉(zhuǎn)了,跳轉(zhuǎn)的的界面會(huì)有返回箭頭
push('name') 跳轉(zhuǎn)到新界面歹袁，如果已在當(dāng)前name界面，會(huì)繼續(xù)創(chuàng)建新的screen,進(jìn)行跳轉(zhuǎn)
goback(),銷毀當(dāng)前界面
popToTop(),銷毀所有界面回到初始化的第一個(gè)路由界面
自己試一試吧寝优。這樣下來条舔，我們能進(jìn)行界面切換啦，但是參數(shù)呢乏矾，參數(shù)怎么傳
5路由傳參
this.props.navigation.navigate('Details', {
data:"消息"
});
接收：
this.props.navigation.getParam('data',"默認(rèn)數(shù)據(jù)")這樣可以獲得
另外一種方式
let {data} = this.props.navigation.state.params;
6.配置 headbar標(biāo)題
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
};
}
class DetailsScreen extends React.Component {
static navigationOptions = {
title: 'Details',
};
}
像這樣固定的寫法孟抗，就能給相應(yīng)的界面加上title啦。這樣的優(yōu)先級(jí)是最高的
7導(dǎo)航傳參妻熊，就是標(biāo)題中獲取或者傳遞參數(shù)
寫法就要變化啦
class DetailsScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('data', '默認(rèn)值'),
};
};
}
8.setParams
...
/* Inside of render() */
<Button
title="Update the title"
onPress={() => this.props.navigation.setParams({data: '更新!'})}
/>
經(jīng)歷過這樣的處理夸浅，headerbar的中關(guān)于navigation相關(guān)才能被識(shí)別出來
9自定義頭部樣式 header styles
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
/* render function, etc */
}
更多的設(shè)置api，請(qǐng)查看官方文檔api
10分享公共的navigationOptions 配置,headerbar設(shè)置
比如每個(gè)界面的樣色樣式都差不多扔役，那么就可以在createStackNavigator中去添加公共配置帆喇。
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
/* The header config from HomeScreen is now here */
navigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
}
);
如果每個(gè)界面有自己的navigationOptions，那這個(gè)相同的就不能起作用亿胸。這是設(shè)置共同的坯钦，那分享是什么意思呢预皇？比如首頁，和詳情界面本來都一樣婉刀，但是這是你想改下詳情中的一些樣式吟温，沿用公共設(shè)置中的屬性數(shù)據(jù)
class DetailsScreen extends React.Component {
static navigationOptions = ({ navigation, navigationOptions }) => {
const { params } = navigation.state;
return {
title: params ? params.otherParam : 'A Nested Details Screen',
/* These values are used instead of the shared configuration! */
headerStyle: {
backgroundColor: navigationOptions.headerTintColor,
},
headerTintColor: navigationOptions.headerStyle.backgroundColor,
};
};
/* render function, etc */
}
感覺用處不大
自定義組件代替標(biāo)題
用圖片logo來替換標(biāo)題
class LogoTitle extends React.Component {
render() {
return (
<Image
source={require('./spiro.png')}
style={{ width: 30, height: 30 }}
/>
);
}
}
class HomeScreen extends React.Component {
static navigationOptions = {
// headerTitle instead of title
headerTitle: <LogoTitle />,
};
/* render function, etc */
}
12 header中的button
class HomeScreen extends React.Component {
static navigationOptions = {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
};
}
13)頭部按鈕訪問組件實(shí)例函數(shù)
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={navigation.getParam('increaseCount')}
title="+1"
color="#fff"
/>
),
};
};
componentDidMount() {
this.props.navigation.setParams({ increaseCount: this._increaseCount });
}
state = {
count: 0,
};
_increaseCount = () => {
this.setState({ count: this.state.count + 1 });
};
/* later in the render function we display the count */
}
參考
14）creact a model stack
一你要有個(gè)model界面。
class ModalScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 30 }}>This is a modal!</Text>
<Button
onPress={() => this.props.navigation.goBack()}
title="Dismiss"
/>
</View>
);
}
}
這個(gè)model路由是跟首頁和詳情是一個(gè)級(jí)的突颊。
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
},
{
/* Same configuration as before */
}
);
const RootStack = createStackNavigator(
{
Main: {
screen: MainStack,
},
MyModal: {
screen: ModalScreen,
},
},
{
mode: 'modal',
headerMode: 'none',
}
);
在你想要展示的地方
onPress={() => navigation.navigate('MyModal')
