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)航行為就像是頂級的導(dǎo)航，用于管理 state 并整合 app-level 級別的功能, 而不需要將 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 返回對應(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