Screen
表示一個(gè)屏幕界面
class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
Screen Navigation Options
- 靜態(tài)定義方法。寫法同上秉沼。
- 動(dòng)態(tài)定義方法贬丛。
static navigationOptions = ({ navigation, screenProps, navigationOptions }) => ({
title: navigation.state.params.name,
headerRight: <Button color={screenProps.tintColor} />
})
API Definition
{
title,
header, // null 時(shí)不展示屏幕的頭部
headerTitle,
headerBackTitle,
headerTruncatedBackTitle,
headerRight,
headerLeft,
headerStyle,
headerTitleStyle,
headerBackTitleStyle,
headerPressColorAndroid,
getturesEnabled
}
Navigator
將多個(gè)屏幕層疊起來右冻，定義各個(gè)屏幕界面之間的邏輯
StackNavigator
從一個(gè)屏幕跳轉(zhuǎn)到下一個(gè)屏幕，定義多個(gè)相互關(guān)聯(lián)的屏幕捡偏。
API Definition：
StackNavigator(RouteConfigs, StackNavigatorConfig)
// RouteConfig
RouteConfigs: {
screen: 'Screen1' // component,
path: '/', // deep linking 或 web 下會(huì)用到
navigationOptions: ({navigation}) => ({title: navigation.state.params.name}) // 重寫Screen下的定義
}
StackNavigatorConfig: {
inittialRouteName,
initialRouteParams,
navigationOptions,
paths,
mode,
headerMode,
cardStyle,
transitionConfig,
onTransitionStart,
onTransitionEnd
}
舉個(gè)栗子：
const ModalStack = StackNavigator({
Home: {
screen: MyHomeScreen,
path: '/'
},
Profile: {
path: 'people/:name',
screen: MyProfileScreen,
},
});
TabNavigator
關(guān)聯(lián)多個(gè) tab 的 Screen
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
API Definition
TabNavigator(RouteConfigs, TabNavigatorConfig)
// RouteConfigs 同 StackNavigator
TabNavigatorConfig: {
tabBarComponent,
tabBarPosition, // top 或 bottom
swipeEnabled,
animationEnabled,
lazy,
tabBarOptions: {
avtiveTintColor,
activeBackgroundColor,
inactiveTintColor,
inactiveBackgroundColor,
showLabel,
style,
labelStyle,
tabStyle
},
initialRouteName,
order,
paths,
backBehavior
}
舉個(gè)栗子
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
DrawerNavigator
定義一個(gè)抽屜列表
API Definition
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
// RouteConfig 同 StackNavigator
DrawerNavigatorConfig: {
drawerWidth,
drawerPosition,
contentComponent,
contentOptions: {
}
}
舉個(gè)栗子
const MyApp = DrawerNavigator(
{
First: {
path: '/',
screen: FirstScreen,
},
Second: {
path: '/sent',
screen: SecondScreen,
},
},
{
initialRouteName: 'First',
drawerPosition: 'left',
drawerWidth: 200,
contentOptions: {
activeTintColor: 'red'
}
}
)
Navigator Props
將StackNavigator 換成 TabNavigator 或 DrawerNavigator 同樣成立
const SomeStack = StackNavigator({
// config
});
<SomeStack
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
Screen Navigation Prop
每個(gè) Screen 都會(huì)接收到 一個(gè) navigation Props, 如下：
this.props.navigation : {
navigate: {
routeName,
params,
action
}, // 導(dǎo)航到其他 Screen
state: {
index,
routes: [{
routeName,
key,
params
}]
},// Screen 當(dāng)前的 state 或 route
setParams, // 改變路由中的參數(shù)
goBack, // 返回到上一屏
dispatch // 向路由發(fā)出 Action
}
navigator 也有 navigation 屬性，但可能只有 state, 和 dispatch 兩個(gè)屬性峡迷，
Navigation Actions
觸發(fā)路由改變
擁有方法如下：
- Navigate：導(dǎo)航到新路由
- Reset: 替換當(dāng)前的 State
- Back: 返回之前的 State
- Set Params: 設(shè)置給定路由的參數(shù)
- Init：如果 state 沒定義银伟，則初始化第一個(gè) state
栗子
NavigationActions.back()
NavigationActions.navigate({ routeName: 'Login' }),
通常返回結(jié)果被 dispatch 調(diào)用
this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'Login' }))
Custom Navigation
const { routes, index } = state;
// 根據(jù)當(dāng)前狀態(tài)找到 Component
const Component = MyRouter.getComponentForState(state);
// 根據(jù) State 找到 active child Screen
let childNavigation = {dispatch, state: routes[index]}
// 使用addNavigationHelpers 來增加導(dǎo)航路徑你虹，方便使用 navigator 調(diào)用
childNavigation = addNavigationHelpers(childNavigation)
<Component navigation={childNavigation} />
API for building custom navigators
createNavigator
將 router 和 navigation view 綁定在一起, 使得該視圖層擁有一個(gè) router 的屬性
等同于
const MyApp = ({ navigation }) => (
<MyView router={MyRouter} navigation={navigation} />
MyApp.router = MyRouter
)
addNavigationHelpers
用來創(chuàng)建 actions ,并被 dispatch 調(diào)用
createNavigationContainer
使得導(dǎo)航行為就像是頂級(jí)的導(dǎo)航，用于管理 state 并整合 app-level 級(jí)別的功能, 而不需要將 navigation 通過 props傳遞給最外層
const CustomTabs = createNavigationContainer(
createNavigator(CustomTabRouter)(CustomTabView)
);
Routers
Custom Router API
getStateForAction(action, state)
當(dāng)發(fā)生 dispatch 或 navigaiton.navigate 時(shí)被調(diào)用彤避，通常返回一個(gè)新的 state
{
index: 1,
routes: [
{ key: 'A', routeName: 'Foo' },
{ key: 'B', routeName: 'Bar' },
],
}
getComponentForRouteName(routeName)
根據(jù) routeName 返回對(duì)應(yīng)的 component
router.getComponentForRouteName('Foo')
getComponentForState(state)
返回當(dāng)前的 component
getActionsForPathAndParams(path, params)
返回一個(gè) action, 當(dāng)再次回到該路由下時(shí)會(huì)被用到
getScreenOptions(navigation, screenProps)
const screenNavigation = addNavigationhelpers({
state: navigation.state.routes[navigation.state.index],
dispatch: navigation.dispatch
})
const options = this.props.router.getScreenOptions(
screenNavigation,
{}
)
const title = options.title
StackRouter
管理 navigation stack
const MyApp = StackRouter({
Home: {
screen: HomeScreen,
path,
getScreen // Set a lazy getter for a screen
},
Profile: {
screen: ProfileScreen
}, {
initialRouteName: 'Home',
initialRouteParams,
paths
}
})
TabRouter
const MyApp = TabRouter({
Home: { screen: HomeScreen },
Settings: { screen: SettingsScreen },
}, {
initialRouteName: 'Home',
order,
paths,
backBehavior
})
Views
Built in Views
- CardStack
- Card
- Header
- Tabs
- Drawer
