我试图在我的应用程序中定义反应原生的导航,但我得到一个奇怪的错误。
应用程序上的根堆栈
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,
}
},
什么声明'屏幕:'搜索''做什么?什么时候用这种方式和其他方式?
我今天遇到了同样的问题。在我的情况下,似乎问题是在StackNavigator中声明的屏幕导入错误。
干杯!新生儿重症监护病房