擴展命名空間JS導入

Question

這是一個普通的ES6問題，但我在React Native的上下文中遇到過。基本的問題是我想重寫一些通常使用我自己的組件從「react-native」模塊導入的組件。我這樣做的方法如下所示：

---

，而不需要組件與import { Text, View, etc } from 'react-native'

需要他們這樣的：import { Text, View, etc } from './ui_components'

其中ui_components.js看起來像：

export * from 'react-native'

---

問題是，我如何將自己的組件添加到此導出？理想情況下，我會能夠通過做這樣的事情，以增加他們在ui_components.js：

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

但是這完全不是那麼回事。有任何想法嗎？

Answer 1

您需要導入React Native的組件並將其重新導出，有或沒有來自您身邊的擴展 - 這取決於您。

但請記住 - 千萬不要覆蓋React的內部（或任何其他的內部）。組件是可組合的，耶！

例如，在這裏，我創建了自定義Text組件因爲我希望我的應用中的所有文本在默認情況下都是紅色的。我也希望它是可配置的，如果我需要不同顏色的標題/副標題/不管...

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

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

有個想法嗎？

好，現在到文件夾結構...

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';