/**
* Created by YiBing on 2017/5/5.
*
* 一个StackNavigator详细的例子，效果：1个主页面，2个子页面，每个页面有三个按钮，可以跳转到相应的页面。
*
* React Navigation -- StackNavigator:
API Definition--StackNavigator(RouteConfigs, StackNavigatorConfig);
RouteConfigs--StackNavigator({
// For each screen that you can navigate to, create a new entry like this:
Profile: {
// `ProfileScreen` is a React component that will be the main content of the
screen.
screen: ProfileScreen,
// When `ProfileScreen` is loaded by the StackNavigator, it will be given a
`navigation` prop.
// Optional: When deep linking or using react-navigation in a web app, this path is
used:
path: 'people/:username',
// The action and route params are extracted from the path.
// Optional: Override the `navigationOptions` for the screen
navigationOptions: ({navigation}) => ({
title: `${navigation.state.params.username}'s Profile'`,
}),
},
...MyOtherRoutes,
});
StackNavigatorConfig--
initialRouteName:默认路由，就是第一个要显示的页面。
initialRouteParams；
navigationOptions:对所有的screen的默认配置。
paths：对所有路由的path属性的默认配置。
mode：定义渲染风格，enum（card(IOS、Android都可以)、modal（仅IOS））。
headerMode：enum（float、screen、none）。
cardStyle：Use this prop to override or extend the default style for an individual
card in stack.
transitionConfig：Function to return an object that overrides default screen
transitions.
onTransitionStart：Function to be invoked when the card transition animation is about
to start.
onTransitionEnd：Function to be invoked once the card transition animation completes.
Screen Navigation Options:
title: Generic title that can be used as a fallback for headerTitle and tabBarLabel。
headerRight：React Element to display on the right side of the header。
header
headerTitle
headerBackTitle：Title string used by the back button on iOS or null to disable
label. Defaults to scene title。
headerTruncatedBackTitle
headerLeft
headerStyle
headerTitleStyle
headerBackTitleStyle
headerTintColor
headerPressColorAndroid：Color for material ripple (Android >= 5.0 only)
gesturesEnabled
Navigator Props：
const SomeStack = StackNavigator({
// config
});
<SomeStack
screenProps={
// this prop will get passed to the screen components asthis.props.screenProps
} />
*/
import React from 'react';
import {
Button,
ScrollView,
Text,
} from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
const MyNavScreen = ({navigation, banner}) => (
<ScrollView>
<Text>{banner}</Text>
<Button
onPress={() => navigation.navigate('Profile', { name: 'Jane' })}
title="Go to a profile screen"
/>
<Button
onPress={() => navigation.navigate('Photos', { name: 'Jane' })}
title="Go to a photos screen"
/>
<Button
onPress={() => navigation.goBack(null)}
title="Go back"
/>
</ScrollView>
);
const MyHomeScreen = ({navigation}) => (
<MyNavScreen
banner="Home Screen"
navigation={navigation}
/>
);
MyHomeScreen.navigationOptions = {
title: 'Welcome',
};
const MyPhotosScreen = ({navigation}) => (
<MyNavScreen
banner={`${navigation.state.params.name}'s Photos`}
navigation={navigation}
/>
);
MyPhotosScreen.navigationOptions = {
title: 'Photos',
};
const MyProfileScreen = ({navigation}) => (
<MyNavScreen
banner={
`${navigation.state.params.mode === 'edit' ? 'Now Editing ' : ''}${navigation.state.params.name}'s Profile`
}
navigation={navigation}
/>
);
MyProfileScreen.navigationOptions = props => {
const {navigation} = props;
const {state, setParams} = navigation;
const {params} = state;
return {
headerTitle: `${params.name}'s Profile!`,
// Render a button on the right side of the header.
// When pressed switches the screen to edit mode.
headerRight: (
<Button
title={params.mode === 'edit' ? 'Done' : 'Edit'}
onPress={() => setParams({ mode: params.mode === 'edit' ? '' : 'edit' })}
/>
),
};
};
const SimpleStack = StackNavigator(
{
Profile: {
path: 'people/:name',
screen: MyProfileScreen,
},
Photos: {
path: 'photos/:name',
screen: MyPhotosScreen,
},
Home: {
screen: MyHomeScreen,
},
},
{
initialRouteName: 'Home',
}
);
export default SimpleStack;
