在下面的代码中，我希望 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>
);
}
}
链接到博览会小吃以在设备上检查它。
到目前为止，我已经阅读了有关 React 中重定父级的问题，使用门户实现，并且还看到了在没有解决方案的情况下在 react native 中支持重定父级的问题。
那么，如何在多个屏幕上重用组件实例，而无需在每个屏幕中创建它的新实例？
希望重定父级是答案，但找不到任何实现，所以如果重定父级是这个问题的答案，那么如何自己实现它？
您肯定需要重新设置视图的父级。我搜索了一些像 React Portals 一样工作的库。
我们有两个项目可用：
-
https://github.com/zenyr/react-native-portal
-
https://github.com/mfrachet/rn-native-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;
在目的地使用此(不要忘记设置相同的唯一门户名称(
import React from "react";
import { PortalDestination } from "rn-native-portals";
class Destination extends React.Component {
render() {
return (
<PortalDestination name="destinationPortal" />
);
}
}
export default Destination;
这个项目很棒，但绝对需要我们的社区帮助来创建更好的文档。
我有一个需要使用此功能的项目，将视频重新设置为屏幕外部的父级。我正在认真考虑 PR 自动链接支持以避免编译警告。
有关以下内容的更多有用信息：
项目理念： https://github.com/mfrachet/rn-native-portals/blob/master/docs/CONCEPT.md
创建项目的原因(历史悠久(： https://tech.bedrockstreaming.com/6play/how-a-fullscreen-video-mode-ended-up-implementing-react-native-portals/
这里的问题是，每次状态更改时，组件都会重新渲染webView对象并显示当前日期。我建议您在调用WebViewComp时将webView更改为组件并添加静态键，以防止每次状态更改时卸载/挂载。
const WebViewComp = () => ( //Change declaration to function component instead of constant object
<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 style={styles.container}>
<Text style={styles.paragraph} onPress={this.onClick}>
Click Me: {this.state.clicks}
</Text>
{this.state.clicks % 2 === 0 ? <WebViewComp key="child" /> : null}
{this.state.clicks % 2 === 1 ? <WebViewComp key="child" /> : null}
</View>
);
}
}
没有尝试过接受答案的项目，但对于React Native来说，@gorhom/portal像冠军一样保留上下文的魅力！