typescript - 如何在反应本机组件之外定位dom元素

Question

我正在开发一个 React 本机小部件。它由一个 View 组成，我想给这个 View 赋予与页面上具有特定类的另一个元素相同的颜色。

在 React（非本地）中，我会这样做：

componentDidMount(): void {
  const otherElement = document.querySelector(".classOfElementThatIsNotInMyReactNativeWidget") as HTMLElement;
  const thisComponent = this.Ref.current   // I am getting the reference to my widget in the constructor using React.createRef();
  thisComponent.style.backgroundColor = otherElement.style.backgroundColor
}

在 React native 中，我们没有文档，也无法进行 getElementById。

那么我该怎么做呢？

（是的，我是 React Native 的新手）

注意：棘手的是我正在为 Mendix 开发一个小部件。因此，我无法直接访问应用程序的其余部分，只能访问我的小部件中的组件。我想做的是“监听”我的小部件之外的另一个组件。

Answer 1

我建议你创建一个全局文件，命名为theme.js. 添加所有全局样式值，我的意思是您在组件中多次使用的值。

示例主题.js：

const theme = {
  primary: "rgba(255, 255, 0, 1)",
  error: "rgba(0, 255, 0, 1)",
  // other colors
}

export default theme;

现在，您可以在其他组件中使用这些颜色，如下所示：

import theme from '../../your-theme-file-path/theme.js;

const CustomComponent = () => (
  <View style={{ backgroundColor: theme.primary }}>
    <Text>Test</Text>
  </View>
)