javascript - 扩展命名空间 JS 导入

Question

这是一个常见的 ES6 问题，但我在 React Native 的上下文中遇到过它。基本问题是我想用我自己的组件覆盖通常从“react-native”模块导入的一些组件。我的方法如下所示:

<小时/>

不需要使用 import { Text, View, etc } from 'react-native' 的组件

像这样要求它们:从'./ui_components'导入{文本， View 等}

其中 ui_components.js 看起来像:

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