Question

我试图在React Native中定义应用程序中的导航，但是出现一个奇怪的错误。

应用程序上的根堆栈

import React from 'react'
import { Easing, Animated } from 'react-native'

import { createAppContainer, createStackNavigator, createSwitchNavigator } from 'react-navigation'
import { UserStore } from '../stores'
import { Playground, Welcome, Login, Register, ConfirmationCode, App, AuthLoading } from '../screens'
// import TabStack from './TabStack'

const transitionConfig = () => {
  return {
    transitionSpec: {
      duration: 750,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
      useNativeDriver: true,
    },
    screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps

      const thisSceneIndex = scene.index
      const width = layout.initWidth

      const translateX = position.interpolate({
        inputRange: [thisSceneIndex - 1, thisSceneIndex],
        outputRange: [width, 0],
      })

      return { transform: [{ translateX }] }
    },
  }
}

const AuthStack = createStackNavigator(
  {
    Welcome,
    Login,
    Register,
    ConfirmationCode,
  },
  {
    initialRouteName: 'Welcome',
    headerMode: 'none',
    lazy: true,
    transitionConfig,
    defaultNavigationOptions: {
      gesturesEnabled: false,
    },
  }
)



let MainStack = createSwitchNavigator(
  {
    AuthLoading,
    Auth: AuthStack,
    App,

  },
  {
    initialRouteName: 'AuthLoading',
    headerMode: 'none',
    lazy: true,

    defaultNavigationOptions: {
      gesturesEnabled: false,
    },
  }
)

export default createAppContainer(MainStack)

App.js

import React, { Component } from 'react'
import {
  View,
  Text,

} from 'react-native'
import { inject, observer } from 'mobx-react/native'
import style from './style'
import AppStack from '../../routes/AppStack';
@inject('UserStore')
@observer
class App extends Component {

  constructor(props) {
    super(props)
    this.state = {

    }
  }

  componentDidMount() {

  }


  render() {
    const { container } = style;
    return (
      <View style={container}>
      <AppStack/>
      </View>

    )
  }
}

export default App

AppStack

import React from 'react'
import { Easing, Animated } from 'react-native'

import { createAppContainer, createStackNavigator, createSwitchNavigator } from 'react-navigation'
import { UserStore } from '../stores'
import { Playground, Welcome, Login, Register, ConfirmationCode, App, Search, SearchResult, AuthLoading, BusinessDetail, BusinessMap, MyFavouriteBusiness, MakeAppointment, EditUserProfile, TermsAndConditions } from '../screens'
import TabStack from './TabStack'

const transitionConfig = () => {
  return {
    transitionSpec: {
      duration: 750,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
      useNativeDriver: true,
    },
    screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps

      const thisSceneIndex = scene.index
      const width = layout.initWidth

      const translateX = position.interpolate({
        inputRange: [thisSceneIndex - 1, thisSceneIndex],
        outputRange: [width, 0],
      })

      return { transform: [{ translateX }] }
    },
  }
}

export default createStackNavigator(
  {
    TabStack,
    SearchResult: {
      screen: SearchResult
    },
    // SearchResult: SearchResult,
    BusinessDetail: {
      screen: BusinessDetail
    },
    BusinessMap: {
      screen: BusinessMap
    },
    MakeAppointment: {
      screen: MakeAppointment
    },
    TermsAndConditions: {
      screen: TermsAndConditions
    },
    EditUserProfile: {
      screen: EditUserProfile

    }
  },
  {
    initialRouteName: 'TabStack',
    headerMode: 'none',
    lazy: true,
  }
)

TabStack

import React from 'react';

import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import {
  Search,
  UserProfile,
  MyFavouriteBusiness,
  MyAppointments
} from '../screens'
import Icon from 'react-native-vector-icons/Feather';
import Colors from '../utils/Colors'
export default TabStack = createBottomTabNavigator(
  {
    // Search: {
    //   screen: Search
    // },
    Search:Search,
    MyFavouriteBusiness: MyFavouriteBusiness,
    MyAppointments: MyAppointments,
    UserProfile,


  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let icon_name;
        switch (routeName) {
          case 'Search': {
            icon_name = 'search'
            break;
          }
          case 'MyFavouriteBusiness': {
            icon_name = 'heart'
            break;
          }
          case 'MyAppointments': {
            icon_name = 'calendar'
            break;
          }
          case 'UserProfile': {
            icon_name = 'user'
            break;
          }
          default: {
            icon_name = 'search'
            break;
          }
        }


        return <Icon name={icon_name} size={horizontal ? 20 : 25} color={tintColor} />;
      },
    }),
    initialRouteName: 'Search',
    tabBarOptions: {

      activeTintColor: Colors.pink,
      inactiveTintColor: Colors.black,
      showLabel: false,
      style: {
        backgroundColor: 'white'
      }
    },
  }
)

我试图将AppStack分离到另一个文件，然后将其导入屏幕“ App.js”并在那里调用堆栈，然后出现此问题。此外，我试图了解两者之间的区别以这种方式声明导航

 export default TabStack = createBottomTabNavigator(
  {
    Search:Search,
    MyFavouriteBusiness: MyFavouriteBusiness,
    MyAppointments: MyAppointments,
    UserProfile,


  },

以这种方式

 export default TabStack = createBottomTabNavigator(
  {
    Search:{
      screen:Search,
    }



  },

'screen：'Search'的声明做什么？何时使用这种方式，何时使用另一种方式？

Answer 1

我今天有同样的问题。在我的情况下，问题似乎是错误导入了StackNavigator中声明的屏幕。

干杯！尼库（Nicu）

反应导航v3无法读取未定义的属性“默认”

1 个答案: