2016-12-02 75 views
0

相關/相似問題導致簡單錯誤(屬性不正確)等。使用從React Native網站直接提取的代碼,所以它確實看起來應該起作用。來自Facebook的React Native Navigator示例代碼失敗:類型無效:預期爲字符串(對於內置組件)或類/函數

我正在嘗試將Navigator組件改編成一個非常簡單的現有應用程序。我已經開始與基本的導航儀上的陣營本地網頁:https://facebook.github.io/react-native/docs/using-navigators

./src/scene/myScene.jsx.js(直接從教程解除):

import React, { Component, PropTypes } from 'react'; 
import { View, Text, TouchableHighlight } from 'react-native'; 

export default class MyScene extends Component { 
    render() { 
    return (
     <View> 
     <Text>Current Scene: {this.props.title}</Text> 

     <TouchableHighlight onPress={this.props.onForward}> 
      <Text>Tap me to load the next scene</Text> 
     </TouchableHighlight> 

     <TouchableHighlight onPress={this.props.onBack}> 
      <Text>Tap me to go back</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 
} 

MyScene.propTypes = { 
    title: PropTypes.string.isRequired, 
    onForward: PropTypes.func.isRequired, 
    onBack: PropTypes.func.isRequired, 
}; 

index.ios.js(實際上與示例代碼):

import React, {Component} from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
    Navigator 
} from 'react-native'; 
import {MyScene} from './src/scene/myScene.jsx.js' 

export default class kisharNine extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <Navigator 
     initialRoute={{ title: 'My Initial Scene', index: 0 }} 
     renderScene={(route, navigator) => 
      <MyScene 
      title={route.title} 

      // Function to call when a new scene should be displayed 
      onForward={() => { 
       const nextIndex = route.index + 1; 
       navigator.push({ 
       title: 'Scene ' + nextIndex, 
       index: nextIndex, 
       }); 
      }} 

      // Function to call to go back to the previous scene 
      onBack={() => { 
       if (route.index > 0) { 
       navigator.pop(); 
       } 
      }} 
      /> 
     } 
     /> 
    ) 
    } 

} 

AppRegistry.registerComponent('kisharNine',() => kisharNine); 

錯誤堆棧:

type is invalid: expected a string (for built-in components) or a class/function (for composite 
components) but got: undefined. Check the render method of `Navigator`. 

instantiateReactComponent 
    instantiateReactComponent.js:77 
instantiateChild 
    ReactChildReconciler.js:56 
<unknown> 
    ReactChildReconciler.js:88 
traverseAllChildrenImpl 
    traverseAllChildren.js:83 

我可以看到的唯一區別是構造函數。刪除,沒有區別。這可能是示例代碼中的一個錯誤?

+0

嘗試添加此道具:如果REF = {this._setNavigator},其中_setNavigator被定義爲_setNavigator(navigatorInstance){ (_navigator ==未定義|| _navigator == NULL){ _navigator = navigatorInstance ; } } 讓我知道它是否工作 –

回答

1

我認爲從'./src/scene/myScene.jsx.js'導入{MyScene}的問題,因爲您要導出默認值,它應該是:從'./src/scene/myScene導入MyScene .jsx.js'

+0

此外,您可以調用您的文件.js,不需要使用.jsx。 –

+0

.jsx有助於一些美化工作 - 如果他們沒有在文件名中看到jsx,他們會搞砸重新格式化 – jcollum

+0

我看到我認爲 - 因爲我使用'export default',所以我不需要解構對象回來了,是嗎?如果我正在導出多個對象/類,那麼我需要使用大括號表示法,對吧? – jcollum

相關問題