标签: react-native-web

更新:

反应导航网络支持已完成.请遵循:https: //reactnavigation.org/docs/en/web-support.html

原文:

我尝试在react-native和web之间共享我的代码.当我尝试react-native-web时,它运作良好.但是只有一个问题,如何从网址访问特定的屏幕？我读了react-navigation的文档,没有任何相关内容.和react-router-native可以捕获web url,但它有导航器喜欢StackNavigator/DrawerNavigator.那个想法？

我用这个库得到了这个错误https://github.com/react-native-web-community/react-native-web-linear-gradient/

错误链接https://github.com/react-native-web-community/react-native-web-linear-gradient/issues/1错误 详情:模块解析失败:意外令牌(5:22)您可能需要适当的加载器来处理这种文件类型.

我的网站:

'use strict';

const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');

const publicPath = '/';
const publicUrl = '';
const env = getClientEnvironment(publicUrl);

module.exports = {
  devtool: 'cheap-module-source-map',
  entry: [
    require.resolve('./polyfills'),
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
  ],
  output: {
    pathinfo: true, …

我正在尝试使用在 React Native 应用程序内的 web 视图中打开的页面的 postmessage。我尝试了很多次，但仍然无法发送。

我可以正常收听网页消息。我只是无法寄回任何东西。

我目前正在使用react-native-webview 11.6.5

export default function WebPage() {
  const webviewRef = useRef();

  const onMessage = (event) => {
    //receive message from the web page. working here until here
    const data = JSON.parse(event.nativeEvent.data);

    //reply the message
    webviewRef.current.postMessage(
      JSON.stringify({reply: 'reply'}),
      '*'
    )
  }

  return <View>
    <WebView
      ref={webviewRef}
      originWhitelist={['*']}
      source={{ uri: 'https://robertnyman.com/html5/postMessage/postMessage.html' }}
      domStorageEnabled
      javaScriptEnabled
      onMessage={onMessage}
    />
  </View>


}

有什么想法我做错了什么吗？

更新：

感谢@Ahmed Gaber 的帮助，我找到了这个问题https://github.com/react-native-webview/react-native-webview/issues/809并发现它们正在更改postMessage为injectJavaScript.

所以我将代码更新onMessage为以下内容：

const onMessage …

我目前正在使用 expo 开发一个 react-native 项目。我使用的很多 react-native 组件都可以很好地与 react-native-web 一起使用。但是我很难找到一个可以在 IOS/Android 和 Web 上正确呈现的日期选择器库。我知道如果必须的话，我可以构建一个自定义日期选择器，但是是否已经存在一个组件？

刚好看到 React-Native-Web(RNW) ，我的想法是什么？为什么我们需要另一个 React for Web 版本？我们已经有了 ReactJS(RJS)。

所以我去了它的网站，看到文档说它允许你通过使用 React DOM、高质量等来使用 Native 组件。

我仍然不太清楚使用 RNW 的区别和好处。

有人可以用一些具体的例子和性能数据等启发我吗？

我知道 Twitter 和其他一些应用程序正在使用它，但仅仅告诉我“Twitter 正在使用它”已经足够好，但不足以说明差异。

看起来 Expo Webpack 没有optional chaining。

当我尝试将UI Kitten安装到 Expo Web 应用程序时，我发现了这一点。

这是我将 UI Kitten 添加到新创建的 Expo 应用程序后的编译错误

node_modules/@ui-kitten/components/ui/input/input.component.js 104:38
Module parse failed: Unexpected token (104:38)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         this.webEventResponder = devsupport_1.WebEventResponder.create(this);
|         this.focus = () => {
>             this.textInputRef.current?.focus();
|         };
|         this.blur = () => {

Deps 版本（我在这里写的那一刻的最新版本。）

• expo@37.0.6
• @ui-kitten/components@5.0.0-alpha.1

有什么技巧可以解决这个问题？

我在 React Native Web 应用程序中有一些参考资料 - 这些参考资料适用于 React Native，但不适用于 RNW。

例如，我有这个代码：

this.highlight.current._children[i].setNativeProps({ style: { backgroundColor: "black" } });
this.highlight.current._children[i]._children[0]._children[0].setNativeProps({ style: { color: "white" } })
this.highlight.current._children[i]._children[1]._children[0].setNativeProps({ style: { color: "white" } })

这是基于此：

this.highlight = React.createRef();

它作为道具传递到子组件中并用作：

<View ref={this.props.highlight}>

它有几个孩子（也有嵌套的孩子）。

然而，在网络上，根本没有._children。

我如何访问儿童？

如果满足以下条件，则可以直接进行 DOM 操作Platform.OS === 'web'：

let dom = ReactDOM.findDOMNode(this.highlight.current);
... DOM manipulations

但如果不是绝对必要的话，这会让人感觉混乱和代码重复。我更愿意直接通过 React Native API 将我的修改应用于参考。

编辑：更多代码 - 这是我的结构和问题的一些相关功能。我剪掉了不相关的部分，试图让我发布的代码更小

class DetailBody extends Component {
  constructor() {
    super();
}

  render() {

    return (
      <ScrollView …

我的 Web 应用程序是由 React Native Web 和 React-navigator 创建的。

默认情况下，react-navigator 将 RouteName 设置为 document.title 。

前任。

<Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="root" component={RootScreen} />
    <Stack.Screen name="search" component={SearchScreen} />
</Stack.Navigator>

产生

<Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="root" component={RootScreen} />
    <Stack.Screen name="search" component={SearchScreen} />
</Stack.Navigator>

我想要的是

根据需要更改 document.title。

我尝试过但不起作用

尝试直接访问文档对象，但下面的代码不起作用。

export default function RootScreen({ navigation }) {
  useEffect(() => {
    document.title = `My Web App | ${someMessage}`
  })

我希望https://github.com/xgfe/react-native-datepicker与 react-native-web一起使用，但我认为它不兼容。

是否有其他库提供与图像兼容的本机日期选择器外观react-native-web？

将包添加react-native-web到现有的 RN 应用程序（使用 制作react-native init）。按照此站点的设置进行操作：

https://arry.medium.com/how-to-add-react-native-web-to-an-existing-react-native-project-eb98c952c12f

该项目编译成功，但在浏览器中出现空白屏幕和循环错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

我找不到有关此错误的任何信息，我已跟踪相关文件，但不知道如何继续。