React Native：如何访问函数式组件内部的JSX组件？

原GlobalStyles的递归处理逻辑只能作用于组件通过props.children接收的元素，而SimpleTextButton内部的Button是组件自身硬编码渲染的，不属于它的props.children，所以无法直接通过现有逻辑修改。以下是两种无需修改SimpleTextButton的可行方案：

方案1：全局替换Button组件 #

通过打包工具的模块别名配置，将SimpleTextButton中导入的原始Button替换为一个已合并全局主题样式的包装组件，让内部Button自动应用全局样式。

步骤1：创建主题化Button包装组件 #

import React, { useContext } from 'react';
import { Button as OriginalButton } from 'react-native-elements'; // 根据你的Button来源调整
import { ThemeContext } from './ThemeContext';
import mergeDeep from './mergeDeep';

export const ThemedButton = (props) => {
  const theme = useContext(ThemeContext);
  
  // 合并主题样式与组件自身传入的样式
  const mergedButtonStyle = mergeDeep(theme.button.buttonStyle, props.buttonStyle || {});
  const mergedTitleStyle = mergeDeep(theme.button.titleStyle, props.titleStyle || {});
  
  return (
    <OriginalButton
      {...props}
      buttonStyle={mergedButtonStyle}
      titleStyle={mergedTitleStyle}
    />
  );
};

步骤2：配置模块别名 #

根据你的项目环境调整配置，让原始Button的导入路径指向包装组件：

• React Native（Metro）：修改metro.config.js

const path = require('path');

module.exports = {
  resolver: {
    alias: {
      // 替换为你实际的Button导入路径
      'react-native-elements/dist/elements/Button/Button': path.resolve(__dirname, './src/components/ThemedButton.js'),
    },
  },
};

• Web项目（Webpack）：修改webpack.config.js的resolve.alias字段

步骤3：用GlobalStyles作为Context Provider包裹应用 #

改造GlobalStyles为主题上下文的提供者，不再需要递归处理children：

import React from 'react';
import PropTypes from 'prop-types';
import { ThemeContext } from './ThemeContext';
import defaultTheme from './defaultTheme';

class GlobalStyles extends React.Component {
  static propTypes = {
    children: PropTypes.array.isRequired,
  };

  render() {
    return (
      <ThemeContext.Provider value={defaultTheme()}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

方案2：让Button通过Context读取全局样式 #

如果可以包装或修改Button组件的实现（无需改动SimpleTextButton），让Button自行从Context中获取全局样式并合并：

步骤1：创建ThemeContext并改造GlobalStyles #

同方案1的步骤3，先建立主题上下文并通过GlobalStyles提供。

步骤2：包装Button组件以读取Context #

import React, { useContext } from 'react';
import { Button as OriginalButton } from 'your-button-library';
import { ThemeContext } from './ThemeContext';
import mergeDeep from './mergeDeep';

const Button = (props) => {
  const theme = useContext(ThemeContext);
  // 合并全局主题props与组件自身props
  const finalProps = mergeDeep(theme.button, props);
  return <OriginalButton {...finalProps} />;
};

export default Button;

之后所有使用Button的组件（包括SimpleTextButton内部）都会自动应用全局样式，无需额外处理。

内容的提问来源于stack exchange，提问作者Maxime maximixdu91 Guerin