如何在 ReactNative 中重新父组件？

Question

如何在 ReactNative 中重新父组件？

在下面的代码中，我希望当点击次数增加时 webView 内容不会改变，但每次加载时，都会显示一个新的时间戳。

const webView = (
  <WebView
    source={{
      uri:
        'data:text/html,<html><script>document.write("<h1 style=\\"font-size:64px\\">"+Date.now()+"<h1>");</script>',
    }}
  />
);


export default class App extends React.Component {
  state = {
    clicks: 0,
  };

  onClick = () => {
    this.setState({ clicks: this.state.clicks + 1 });
  };

  render() {
    return (
      <View>
        <Text onPress={this.onClick}>
          Click Me: {this.state.clicks}
        </Text>

        {this.state.clicks % 2 === 0 ? webView : null}
        {this.state.clicks % 2 === 1 ? webView : null}
      </View>
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

链接到博览会小吃以在设备上检查它。

到目前为止，我读过有关重排根中产生反应的问题在这里，使用门户网站实现，也看到了一个问题上支持重排根目录中发生反应，本地没有解决。

那么，如何在多个屏幕中重用组件实例而不在每个屏幕中创建它的新实例？

希望重新养育是答案，但找不到任何实现，所以如果重新养育是这个问题的答案，如何自己实现它？

Answer 1

May*_*ita 3

您肯定需要重新调整视图的父级。我搜索了一些像 React Portals 一样工作的库。

我们有两个可用的项目：

我测试了第二个包 ( rn-native-portals)，它在 Android 上神奇地工作了：

如何安装

npm install mfrachet/rn-native-portals
react-native link（不幸的是，我们还不能自动链接，但我们可以提交 PR）

执行

你的目标元素需要在里面<PortalOrigin>

import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { PortalOrigin } from 'rn-native-portals';

class Target extends React.Component {
  state = {
    moveView: false,
  }

  render() {
    return (
      <>
        <TouchableOpacity
          style={{ flex: 1 }}
          onPress={() => this.setState({ moveView: !this.state.moveView })}
        >
          <Text>Press Here</Text>
        </TouchableOpacity>

        <PortalOrigin destination={this.state.moveView ? 'destinationPortal' : null}>
          <View>
            <Text>This text will appear on destination magically...</Text>
          </View>
        </PortalOrigin>
      </>
    );
  }
}

export default Target;

Run Code Online (Sandbox Code Playgroud)

在目的地使用此（不要忘记设置相同的唯一门户名称）

import React from "react";
import { PortalDestination } from "rn-native-portals";

class Destination extends React.Component {
  render() {
    return (
      <PortalDestination name="destinationPortal" />
    );
  }
}

export default Destination;

Run Code Online (Sandbox Code Playgroud)

这个项目很棒，但绝对需要我们社区的帮助来创建更好的文档。

我有一个项目需要使用此功能，将视频重新设置到屏幕外部。我正在认真考虑 PR 自动链接支持以避免编译警告。

更多有用的信息：

项目概念： https://github.com/mfrachet/rn-native-portals/blob/master/docs/CONCEPT.md
为什么创建该项目（悠久的历史）： https://tech.bedrockstreaming.com/6play/how-a-fullscreen-video-mode-ending-up-implementing-react-native-portals/

归档时间：	5 年，6 月前
查看次数：	769 次
最近记录：	5 年，6 月前