react-navigation 頁面跳轉 及 傳參

1.配置路由

export const AppNavigator = createStackNavigator (
  {
    Guide: { // 引導頁
      screen: GuidePage
    },
    Launch: { // 啟動頁
      screen: LaunchPage
    },
    Login: { // 登入頁
      screen: LoginPage
    },
    Main: { // 首頁面
      screen: MainPage
    },
    HomeDetail: { // 首頁--詳情頁
      screen: HomeDetailPage
    },
    MineList: { // 我的--清單頁
      screen: MineListPage
    },
    MineCatalog: { // 我的--目錄頁
      screen: MineCatalogPage
    },
    MineDetail: { // 我的--詳情頁
      screen: MineDetailPage
    },
    TeasetApp: {
      screen: TeasetApp,
      navigationOptions: {
        header: null
      }
    }
  },
  {
    initialRouteName: 'Login', // 預設啟動頁
    navigationOptions: {
      header: null
    }
  }
);      

2.設定 頂部導航欄

//設定頂部導航欄的内容
static navigationOptions = ({navigation, screenProps}) => ({
  //左側标題
  headerTitle: '我是首頁面',
  //設定跳轉頁面左側傳回箭頭後面的文字，預設是上一個頁面的标題
  headerBackTitle: null,
  //頂部标題欄的樣式
  headerStyle: styles.headerStyle,
  //頂部标題欄文字的樣式
  headerTitleStyle: styles.headerTitleStyle,
});      

this.props.navigation.navigate('HomeDetail', {detail: item})      

this.props.navigation.state.params.detail