React Native JSX-Export-Import-ID

Question

Ich stoße auf ein seltsames Problem, wenn ich export eine const in eine andere js-Datei. Hier ist mein Problem:

Stellen Sie sich vor, ich habe zwei Dateien mit den Namen index.js und router.js.

// in router.js 
export const stackNav = StackNavigator({ 
Home: { 
    screen: Me, 
    navigationOptions: { 
     title: 'Welcome' 
    } 
} 
}); 


// in index.js 
import { stackNav } from './router'; 

class MainApp extends Component { 
    render() { 
     return (
      <stackNav /> 
     ); 
    } 
} 

export default MainApp; 

Wenn ich den obigen Code verwenden zu laufen, ich nicht meine app laufen, und es zeigt Fehlermeldung mit rotem Schirm: Expected a component class, got [object Object].

Allerdings, wenn ich alle stackNav-StackNav ändern, kann ich betreibe meine App erfolgreich. Also, ich weiß nicht, warum der Fall des Namens/der Kennung zählt?

Answer 1

Da Reagieren/ReactNative Komponentennamen mit Großbuchstaben

Answer 2

Mit Bezug auf Offical beginnen muss doc,

Benutzerdefinierte Komponenten aktivierungspflichtiger

Wenn ein Elementtyp mit einem beginnt Kleinbuchstaben bezieht sich auf eine integrierte Komponente wie oder und führt zu einer Zeichenfolge "div" oder "span", die an React.createElement übergeben wird.

Typen, die mit einem Großbuchstaben wie Compilieren zu React.createElement (Foo) beginnen und einer Komponente entsprechen, die in Ihrer JavaScript-Datei definiert oder importiert wurde.

Wir empfehlen, Komponenten mit einem Großbuchstaben zu benennen. Wenn Sie eine Komponente haben, die mit einem Kleinbuchstaben beginnt, weisen Sie sie einer Großbuchstabenvariablen zu, bevor Sie sie in JSX verwenden.

Im Folgenden finden Sie das Code-Snippet aus dem Dokument.

import React from 'react'; 

// Wrong! This is a component and should have been capitalized: 
function hello(props) { 
// Correct! This use of <div> is legitimate because div is a valid HTML tag: 
    return <div>Hello {props.toWhat}</div>; 
} 

function HelloWorld() { 
    // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized: 
    return <hello toWhat="World" />; 
}