javascript - React( native )- 在第 3 方代码/组件中注入(inject)自定义组件而不是标准组件

Question

例如，我有导出一些组件的库/包:

function SomeComponent() {
    ...
    return (
       <View>
          ...
          <TextInput ... />
          ...
       </View>
    );
}

有什么方法可以使用 SomeComponent 但不是 TextInput 我以某种方式注入(inject)我的自定义 MyCustomTextInput ？

我知道可以使用 CustomTextInput prop 创建 SomeComponent (如果 CustomTextInput 默认值也没关系)值是这样指定的或使用 defaultProps 静态初始化):

function SomeComponent({ CustomTextInput = TextInput }) {
        ...
        return (
           <View>
              ...
              <CustomTextInput ... />
              ...
           </View>
        );
}

我需要的是一种简单的方法来告诉整个应用程序(所有包，所有模块/代码)“无论您在哪里看到 TextInput 组件，都使用我的自定义 MyCustomTextInputComponent ”。这在react/react-native中可能吗？

Answer 1

可以为组件导出包建立索引，条件是: 看示例项目: 示例:https://snack.expo.io/@djalik/thrilled-donut

index.js:

import React from 'react';
import {TextInput} from 'react-native';

const  MyTextInput=()=>{
   return  <TextInput value={'custom'}/>
}


const  MyTextInput2=()=>{
   return  <TextInput value={'custom2'}/>
}

let custom1 = false;
export default (custom1?MyTextInput:MyTextInput2);

并在您需要的应​​用程序中导入:

import {MyTextInput} from './components'