React Navigation--Stack Navigator 详细的例子

/**
 * 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;