React Native Navigator：コンポーネントクラスが必要です。[オブジェクトオブジェクト]

Question

Navigatorコンポーネントを使用して新しいComponentをロードしようとすると、タイトルに表示されるエラーが表示されます。

ナビゲーター成分と私のビューには、次のようになります。

render(){ 
    return(
     <Navigator 
     initialRoute={{name: 'Feed', component: Feed}} 
     renderScene={(route, navigator) => { 
      if(route.component){ 
       return React.createElement(route.component, {navigator, ...this.props}) 
      } 
      } 
     } 
     /> 
    ) 
    } 
} 

initialRouteは完全に正しいビューをレンダリングします。レンダリングされる 子Component Feedを更新ナビゲータボタンのリストが含まれており、それは以下のように、新しいコンポーネントをレンダリングする原因：function updateRoute(route)には、以下のように、新しいコンポーネントの名前を受け取ること

updateRoute(route){ 
    this.props.globalNavigator(route) 
    this.props.navigator.push({ 
     name: route.displayLabel, 
     component: route.label 
    }) 
    } 

    render(){ 
    return(
     <View style={styles.bottomNavSection}> 
     { 
      this.state.navItems.map((n, idx) => { 
      return(
       <TouchableHighlight 
       key={idx} 
       style={this.itemStyle(n.label, 'button')} 
       onPress={this.updateRoute.bind(this, n)} 
       > 
       <Text 
        style={this.itemStyle(n.label, 'text')} 
       > 
        {n.displayLabel} 
       </Text> 
       </TouchableHighlight> 
      ) 
      }) 
     } 
     </View> 
    ) 
    } 

注：onPress={this.updateRoute.bind(this, n)} 。例えば、nは{displayLabel: 'Start', label: 'Feed', icon: ''},に等しくなります。私Profil.jsコンポーネントの

編集 内容：

import React, { Component } from 'react' 
import ReactNative from 'react-native' 
import API from '../lib/api' 

import BottomNavigation from '../components/BottomNavigation' 

const { 
    ScrollView, 
    View, 
    Text, 
    TouchableHighlight, 
    StyleSheet, 
} = ReactNative 

import { connect } from 'react-redux' 

class Profil extends Component { 

    constructor(props){ 
    super(props) 
    } 

    render(){ 
    return(
     <View style={styles.scene}> 
     <ScrollView style={styles.scrollSection}> 
      <Text>Profil</Text> 
     </ScrollView> 
     <BottomNavigation {...this.props} /> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    scene: { 
    backgroundColor: '#0f0f0f', 
    flex: 1, 
    paddingTop: 20 
    }, 
    scrollSection: { 
    flex: .8 
    } 
}) 

function mapStateToProps(state){ 
    return { 
    globalRoute: state.setGlobalNavigator.route 
    } 
} 

export default connect(mapStateToProps)(Profil) 

Answer 1

onPress={this.updateRoute.bind(this, n)}には適切なコンポーネント参照が含まれていませんでしたが、代わりにStringというコンポーネント名が含まれていました。機能を変更することによってそれを修正

：

updateRoute(route){ 
    this.props.globalNavigator(route) 
    this.props.navigator.push({ 
     name: route.displayLabel, 
     component: route.component 
    }) 
    } 

及びコンポーネントを参照して状態を向上させ、文書の初めにコンポーネントをインポートします。

this.state = { 
    navItems: [ 
     {displayLabel: 'Start', label: 'Feed', icon: start, component: Feed}, 
    ] 
} 

Answer 2

私はあなたのコンポーネントをエクスポートすることを忘れだと思います。