扩展命名空间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';