一、安裝包
- 安裝react-navigation。
yarn add react-navigation
# or with npm
# npm install --save react-navigation
- 安裝react-native-gesture-handler.
yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler
- 引入原生庫到項目中。
react-native link react-native-gesture-handler
二、使用
- 初始化路由
const AppNavigator = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen,
}, {
initialRouteName: 'Home',
});
export default createAppContainer(AppNavigator);
或者：
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
- 在屏幕中移動
- 沒有跳轉(zhuǎn)效果：
this.props.navigation.dispatch(StackActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'Details' })
],
}))
- 有push、pop效果
this.props.navigation.navigate('Details')
navigate功能大致意味著“轉(zhuǎn)到此屏幕，如果要跳轉(zhuǎn)的頁面已經(jīng)在屏幕上，它將不會有任何反應(yīng)，如果要跳轉(zhuǎn)的頁面在之前的棧隊列中，它將以pop的形式跳轉(zhuǎn)回去?！?/strong>
- push跳轉(zhuǎn)
this.props.navigation.push("Details")
push代表都會向?qū)Ш蕉褩Ｖ刑砑有侣窂?/strong>
- pop、popToTop跳轉(zhuǎn)
this.props.navigation.pop(2, true)
<!-- 返回到棧頂 -->
this.props.navigation.popToTop()
- goBack返回
this.props.navigation.goBack()
- 頁面間參數(shù)的傳遞
- 傳遞參數(shù)：
/* 1. Navigate to the Details route with params */
this.props.navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
- 接收參數(shù)：
/* 2. Get the param, provide a fallback value if not available */
<!-- -->
const { navigation } = this.props;
<!-- 第一個參數(shù)為傳遞過來的參數(shù)的key，第二個參數(shù)為傳遞過來的參數(shù)的默認(rèn)值 -->
const itemId = navigation.getParam('itemId', 'NO-ID');
const otherParam = navigation.getParam('otherParam', 'some default value');
- 配置標(biāo)題欄
- 普通的導(dǎo)航欄
static navigationOptions = {
title: 'Home',
};
- 在標(biāo)題中使用params
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('otherParam', 'A Nested Details Screen'),
};
};
- 通過修改prams參數(shù)的值修改導(dǎo)航的標(biāo)題
this.props.navigation.setParams({ otherParam: 'Updated!' })}
- 修改導(dǎo)航標(biāo)題的樣式
自定義頁眉的樣式時，使用三個關(guān)鍵特性：headerStyle，headerTintColor，和headerTitleStyle。- headerStyle：將應(yīng)用于View包裝標(biāo)頭的樣式對象。如果你設(shè)置backgroundColor它，那將是你的標(biāo)題的顏色。
- headerTintColor：后退按鈕和標(biāo)題都使用此屬性作為其顏色。在下面的示例中，我們將色調(diào)顏色設(shè)置為白色（#fff），因此后退按鈕和標(biāo)題標(biāo)題將為白色。
-
headerTitleStyle：如果我們想自定義fontFamily，fontWeight等Text為標(biāo)題樣式屬性，我們可以用它來做到這一點。
eg、
static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
<!-- 值為：100、200、300、400、500、600、700、800、900、normal、bold -->
fontWeight: 'bold',
},
};
- navigationOptions跨屏共享
在構(gòu)建navigationStack時，將defaultnavigationOptions加入stackConfi中。
/* The header config from HomeScreen is now here */
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
注意：在屏幕組件中定義的navigaitonOptions與其父堆棧導(dǎo)航的默認(rèn)導(dǎo)航配置合并在一起時，會優(yōu)先展示屏幕組件中定義的導(dǎo)航配置。
- 自定義導(dǎo)航標(biāo)題
class LogoTitle extends React.Component {
render() {
return (
<Image
source={require('./assets/spiro.png')}
style={{ width: 30, height: 30 }}
/>
);
}
}
使用：
static navigationOptions = {
// headerTitle instead of title
headerTitle: <LogoTitle />,
};
- 標(biāo)題按鈕
- 在導(dǎo)航欄右側(cè)添加一個按鈕
headerRight: (
<Button
title="Info"
onPress={ () => Alert.alert("提示", "右邊按鈕")}
color="#fff"
/>
)
- 標(biāo)題與其屏幕組件的交互
- 在組件掛載的時候，將要調(diào)用的方法注冊成一個屬性放在props里。
- 在導(dǎo)航欄按鈕的點擊方法里通過獲取props里對應(yīng)的屬性值調(diào)用該方法。
eg、
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 });
};
- 重新返回按鈕
- headerBackTitle 如果想要修改某個頁面的返回按鈕的標(biāo)題，就在該頁面的父級的navigationOptions里設(shè)置對應(yīng)的值，如果不想顯示任何文本，就設(shè)置為null，注意不能設(shè)置為空字符串，否則無效。
- headerTruncatedBackTitle 如果headerBackTitle設(shè)置的文本過長，就顯示不出來了，可以使用headerTruncatedBackTitle設(shè)置一個默認(rèn)的顯示。
- headerBackImage 可以設(shè)置返回按鈕的對應(yīng)的圖標(biāo)。
