Question

这是一个一般的ES6问题，但我在React Native的上下文中遇到过它。基本问题是我想要覆盖我通常从＆＃39; react-native＆＃39;中导入的一些组件。模块与我自己的组件。我这样做的方法如下：

而不是要求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';

扩展命名空间的JS导入

1 个答案: