React Native，没有为索引未定义定义路由答案

【问题标题】：React Native, there is no route defined for index undefinedReact Native，没有为索引未定义定义路由
【发布时间】：2017-10-30 08:40:21
【问题描述】：

我想创建一个订单页面，其中包含两个选项卡下订单选项卡，即我的订单选项卡。所以我创建了一个Order.js 文件和另一个OrderContent.js 文件。

Order.js

/* @flow */
import React from 'react'

import {
  View,
  StatusBar,
} from 'react-native'

import SplashScreen from 'react-native-splash-screen'

import HomeHeader from '../Components/HomeHeader'
import OrderContent from './OrderContent'


export default class OrdersScreen extends React.Component {
  static navigationOptions = {
    drawer: () => ({
      label: 'Orders',
    }),
  }
  static propTypes = {
    navigation: React.PropTypes.object.isRequired,
  }

  componentDidMount() {
    SplashScreen.hide()
  }
  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <StatusBar
          barStyle="light-content"
          backgroundColor={'#202930'} />
        <HomeHeader
          title="Order Page"
          navigation={this.props.navigation} />
        <OrderContent navigation={this.props.navigation}
           />
      </View>
    )
  }
}

Ordercontent.js

const CustomTabView = ({router, navigation}) => {
  const { routes, index } = navigation.state
  const ActiveScreen = router.getComponentForState(navigation.state)

  return (
    <View style={styles.container}>
      <CustomTabBar navigation={navigation} />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index],
        })}/>
    </View>
  )
}
CustomTabView.propTypes = {
  router: React.PropTypes.object.isRequired,
  navigation: React.PropTypes.object.isRequired,
  // team: React.PropTypes.func.isRequired,
}

const CustomTabRouter = TabRouter({
    PlaceOrder: {
      screen: PlaceOrderScreen,
      path: '/place-order',
    },
    MyOrders: {
      screen: MyOrderScreen,
      path: '/my-orders',
    },
  },
  {
    // Change this to start on a different tab
    initialRouteName: 'PlaceOrder',
  }
)

const OrderContent = createNavigationContainer(createNavigator(CustomTabRouter)(CustomTabView))

export default OrderContent

当我尝试运行应用程序时，它显示为

没有为未定义的索引定义路由。检查您是否通过了具有有效标签索引的导航状态。

我知道问题存在于<OrderContent navigation={this.props.navigation} /> 部分本身，但不知道如何解决。

【问题讨论】：

您是否尝试在CustomTabView 中记录index 或navigation.state？
该错误主要是因为 ActiveScreen 标签期望 team 属性。在我从CustomTabView.propTypes 取消注释团队行并在CustomTabView 中添加第三个team 参数后，错误就消失了。但我面临另一个错误undefined is not an object on calling splashscreen.hide()
公开问题：undefined is not an object on calling hide()
该错误不意味着您没有正确配置路由。错过了root 路由？
确保你已经运行了这个命令rnpm link react-native-splash-screen，它应该会自动链接库。在我的情况下，这适用于 iOS，但我必须为 Android 进行手动链接，描述为 here

标签： javascript reactjs react-native react-router

【解决方案1】：

默认情况下，react native 会转到一个名为 index.js 的页面您是否使用此名称创建了文件？它应该包含类似这样的内容

<code>

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
</code>

您可以代替 App 放置 Order 或 OrderContent 。基本上你可以通过这种方式选择你的“登陆标签”。

【讨论】：