React Native，未定义索引为 undefined 的路由。

Question

我希望创建一个订单页面，包括下单选项卡和我的订单选项卡。所以我创建了一个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>
    )
  }
}

订单内容.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} /> 部分本身，但不知道如何克服。

- Avinash Raj

---

你尝试过在CustomTabView中记录index或navigation.state吗？ - Andrew Li

错误主要是因为ActiveScreen标签期望 team 属性。在我从 CustomTabView.propTypes 中取消注释团队行并在 CustomTabView 中添加第三个 team 参数后，错误消失了。但我面临另一个错误，在调用 splashscreen.hide() 时出现 undefined is not an object。 - Avinash Raj

开放问题：在调用hide（）时[undefined is not an object] (https://github.com/crazycodeboy/react-native-splash-screen/issues/30)。 - btzr

这个错误是否意味着你的路由配置不正确？是否缺少“root”路由？请确认。 - matiasfha

请确保您已运行此命令 rnpm link react-native-splash-screen，该命令应会自动链接库。在我的情况下，这对于 iOS 可以正常工作，但我需要手动链接 Android，具体细节可参考此处。 - John Baker

Answer 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>

您可以使用“Order”或“OrderContent”代替“App”，这样就可以选择您的“登陆标签”了。

- Peter Hassaballah