Erweitern Namespaced JS Importe

Question

Dies ist eine allgemeine ES6 Frage, aber ich habe es im Kontext von React Native kennengelernt. Das grundlegende Problem ist, dass ich einige Komponenten, die ich normalerweise aus dem 'react-native' Modul mit meinen eigenen Komponenten importiere, überschreiben möchte. Meine Methode, dies zu tun sieht wie folgt aus:

---

Statt erfordert Komponenten mit import { Text, View, etc } from 'react-native'

verlangen, daß sie wie folgt aus: import { Text, View, etc } from './ui_components'

wo ui_components.js sieht ungefähr so ​​aus:

export * from 'react-native'

---

Das Problem ist, wie füge ich meine eigenen Komponenten zu diesem Export hinzu? Im Idealfall würde ich in der Lage sein, sie durch etwas zu tun, wie dies in ui_components.js hinzuzufügen:

import * as RN from 'react-native' 
RN.Text = myTextComponent 
RN.View = myViewComponent 
export * from RN 

Aber das funktioniert nicht ganz. Irgendwelche Ideen?

Answer 1

Sie müssen React Native-Komponente importieren und erneut exportieren, mit oder ohne Erweiterungen von Ihrer Seite - es liegt an Ihnen.

Aber denken Sie daran - überschreiben Sie niemals die internen Komponenten von React (oder die internen Komponenten eines anderen). Komponenten sind zusammensetzbar, yay!

Zum Beispiel, ich erstelle meine benutzerdefinierte Komponente Ursache Ich möchte alle Texte in meiner App standardmäßig rot sein. Auch ich will es konfigurierbar, wenn ich andere Farbe für Titel/Untertitel/was auch immer brauche ...

import React from 'react'; 
import { Text as NativeText } from 'react-native'; 

export default function Text({ style, ...props}) { 
    return <NativeText style={[ { color: 'red' }, style]} {...props} /> 
} 

Haben Sie eine Idee?

Gut, jetzt Struktur in Ordner ...

ui_components 
| - index.js 
| - Text.js 

// Text.js 
// See example above... 

// index.js 
export { default as Text } from './Text'; 

// In your app 
import { Text } from './ui_components';