React Navigation 的使用基礎部分(二)Hello React Navigation
在web瀏覽器中,你能使用<a>標籤連結到不同的網頁。當用戶點選一個連結,URL被push到瀏覽器歷史棧中。當用戶點選返回按鈕時,瀏覽器將其從棧頂彈出,因此當前頁就是之前訪問過的網頁。React Navive並不想網頁瀏覽器一樣內嵌全域性的歷史棧,因此React Navigation閃亮登場了。
React Navigation的棧導航器可以實現app頁面間的跳轉,也可以管理導航歷史。如果你的app只有一個棧導航器,那麼在概念上就與網路瀏覽器導航狀態相似,使用者與app互動時,頁面入棧出棧,使用者就能看到不同的介面。不同點是React Navigation提供了跳轉的手勢和動畫。
我們只需要一個createStackNavigator的函式就可以開始了。
建立一個棧導航器
createStackNavigator函式返回了React元件。需要路由配置物件和可選的設定物件。因為其返回了元件,我們可以直接從App.js中匯出,在根元件中使用。
// 新專案的 App.js 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 }, });
如果執行這段程式碼,會看到一個帶有空導航欄和包含Home Screen元件的灰色的內容區域的頁面。介面風格是棧導航器的預設配置,我們稍後會學習如何設定。
路由名稱的大小寫並不重要,又能使用小寫home或者大寫Home,取決於你。我們更喜歡用大寫。
唯一必需的路由配置是screen元件。
在React Native中,從App.js中匯出的元件是入口點,或者根元件--其他元件都是從這裡延申出去的。相對於匯出createStackNavigator來說,更好的控制app的根元件通常更有用,所以我們可以匯出一個渲染了棧導航器的元件:
const RootStack = createStackNavigator({ Home: { screen: HomeScreen }, }); export default class App extends React.Component { render() { return <RootStack />; } }
(一個是直接匯出棧導航器,另一個是先render再匯出)
Route configuration
考慮到screen是Home頁的唯一路由配置,我們不需要使用{screen:HomeScreen}格式的配置,可以直接使用元件:
const RootStack = createStackNavigator({
Home: HomeScreen
});
新增第二個路由
<RootStack/>元件不接收任何屬性--所有配置在options引數中指定。options屬性是空的,所以使用預設配置。為了使用options屬性,我們新增第二個screen。
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
const RootStack = createStackNavigator(
{
Home: HomeScreen,
Details: DetailsScreen,
},
{
initialRouteName: 'Home',
}
);
現在我們的棧裡有兩個路由,主頁路由和詳情頁路由。主頁路由相應HomeScreen元件,詳情頁路由相應Details Screen路由。初始路由是主頁路由Home。下一章會講怎樣從Home跳轉到Details。
總結
React Native不像網頁瀏覽器一樣有內建導航器。React Navigation提供了這樣的功能。
createStackNavigator函式需要路由配置物件和options物件,返回React元件。
路由配置物件的key是路由名稱,value是路由的配置。唯一必需的屬性是screen(路由要使用的元件)。
Options物件中指定的initialRouteName是棧中的初始路由。