标签: react-native-web

我正试图深入研究React生态系统,并在使用react-native-web我的React Native Application时遇到问题.我已经在https://github.com/thedarklord1/testNativeWithWeb上托管了该应用程序.我使用Redux Store和React Native来构建一个非常简单的POC来构建计算器.Android和iOS版本正在按预期执行.我面临的问题是,在尝试运行时webpack-dev-server,为了使用react-native-webWeb,它会因错误而失败

ERROR in ./src/App.js
Module parse failed: /Users/abhishekkumar/Desktop/Credifiable/front_end/testNativeWithWeb/src/App.js Unexpected token (9:6)
You may need an appropriate loader to handle this file type.
|   render() {

|     return (
|       <Provider store={store}>
|         <AppContainer/>
|       </Provider>
 @ ./index.web.js 1:0-28
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.web.js

我是React和WebPack生态系统的新手,我们非常感谢任何帮助或指针.TIA.

编辑:我正在使用该命令webpack-dev-server -d --config web/webpack.config.js --inline --hot --colors来运行服务器.

我styled-components在 React-Native App 中使用。假设我有链接组件：

import styled from 'styled-components/native';

const Link = styled.Text`
  color: 'red';

  &:hover {
    color: 'blue';
  }
`

之后，我使用react-native-web 来“编译”我的 React-Native 代码。

一切都很好，希望悬停不起作用。（文本颜色保持red悬停。）

我的猜测是https://github.com/styled-components/css-to-react-native正在删除hover定义。

知道如何解决这个问题吗？

我正在使用React Native Web库，但是我无法在Web上全高

码：

import React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

class index extends React.Component {

    render() {
        return (
            <View style={styles.container}>

                <TouchableOpacity
                    style={{
                    backgroundColor: 'blue'
                }}>
                    <Text style={{
                        color: 'green'
                    }}>Learning</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        margin: 0,
        padding: 0,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red'
    }
})

export default index;

chrome浏览器的结果：

我想从一个相对路径的使用包和我已经做npm install ../../ExamplePackage和react-native install ../../ExamplePackage。这些包在多个层次上是相对的，而不仅仅是一个层次。

我收到以下错误

error: bundling failed: Error: Unable to resolve module `ExamplePackage` from `/Users/vikasagr/workspace/test/ReactNative/MyPackage/src/index.js`: Module `ExamplePackage` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at …

我有一个 React Native 应用程序。我将用户名和 uid 存储在 AsyncStorage 中，因此他们不必每次都登录。如何使用这些值填充 initialState。有一些包可以为你做这件事，但看起来这应该是可行的，而没有另一个包的开销。现在初始状态只是空值。

const initialState = {
  uid: "",
  username: "",
};

我正在使用 react-native-web 和 react-navigation 3.x。

然后我正在运行 react-scripts start a 并且出现此错误：

./node_modules/@react-navigation/native/dist/ResourceSavingSceneView.js
SyntaxError: <path_to_my_app>/node_modules/@react-navigation/native/dist/ResourceSavingSceneView.js: Unexpected token (33:11)

我该如何解决？

我已经使用react-native和设置了 monorepo 项目react-native-web。我正在为 Android、iOS 和 Web 共享相同的代码库。安装react-native-vector-icons后，我在所有三个平台上运行了代码，它在Android和iOS中运行良好，但在Web中运行不佳。在网络上它看起来像下面这样：

Webpack我已经按照这里的描述进行了设置

下面是我的Webpack配置config-overrides.js：

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// our packages that will now be included in the CRA build step
const appIncludes = [
    resolveApp('src'),
    resolveApp('../components/src'),
];
//below is the config for react-native-vector-icons
const ttf = {
    test: /\.ttf$/,
    loader: "file-loader",
    include: path.resolve(__dirname, "../../node_modules/react-native-vector-icons"), …

我需要将页脚组件粘贴到视口的底部。其上方的内容位于ScrollView. 我使用 React Native 和 React Native Web（感谢 Expo）来构建 Web 和本机。

这适用于本机但不适用于网络：

export default function App() {\n  return (\n    <View style={styles.container}>\n      <ScrollView>\n        {new Array(100).fill("").map((_, index) => {\n          return <Text key={index}>Blah {index}</Text>;\n        })}\n      </ScrollView>\n      <View style={styles.footer}>\n        <Text>Im a footer</Text>\n      </View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: "center",\n  },\n  footer: {\n    backgroundColor: "green",\n    padding: 20,\n    width: "100%",\n  },\n});\n

我可以用这段代码破解它。fixed官方不支持，但CSS在web中应用。

  footer: {\n    // @ts-ignore\n    position: Platform.OS === "web" ? "fixed" : …

我正在将我的 expo 应用程序转换为 react-native-web，我在显示Image时遇到了问题。默认情况下，react-native-web 使用position:absolute. 我想覆盖那个类，这是我的代码。

反应原生代码

<View>
    <Image
                style={{width: '80%', height: '35%',position: 'relative'}}
                source={require('../../assets/images/stn_logo.png')}
                alt="Logo" title="Logo" border="0"
              />
  </View>

从 chrome 元素转换的代码

<div class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010" style="height: 35%; position: relative; width: 80%;">
    <div class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw" style="background-image: url(&quot;/static/media/stn_logo.153bbaf1.png&quot;);"></div>
    <img alt="" draggable="false" src="/static/media/stn_logo.153bbaf1.png" class="css-accessibilityImage-9pa8cd">
</div>

在这里你可以看到 My React css 添加到 Parent div 但在img标签 react-native-web 上添加了一个 class css-accessibilityImage-9pa8cd，它的 CSS 在下面来自 chrome

    .css-accessibilityImage-9pa8cd { …

许多人似乎都经历过这个问题的某个版本，但之前的解决方案似乎都不适合我。我的应用程序是使用 CRA 和 React Native Web 构建的。我正在测试基于 React Native 的 View 的组件的点击行为。我尝试从“@testing-library/react-native”导入 { fireEvent }，因为来自 @testing-library/react 的 fireEvent 不起作用，但它会抛出此错误：ReferenceError：DEV未定义

包.json

{
  "name": "writual",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@fortawesome/react-fontawesome": "^0.1.8",
    "@n8tb1t/use-scroll-position": "^1.0.43",
    "@react-mock/localstorage": "^0.1.2",
    "@react-native-community/masked-view": "^0.1.7",
    "@react-pdf/renderer": "^1.6.8",
    "aphrodite": "^2.4.0",
    "babelify": "^10.0.0",
    "blob-stream": "^0.1.3",
    "browserify": "^16.5.0",
    "draft-js": "^0.11.4",
    "draft-js-plugins-editor": "^3.0.0",
    "draft-js-static-toolbar-plugin": "^3.0.1",
    "expo": "^36.0.2",
    "expo-cli": "^3.11.9",
    "firebase": "^7.9.1",
    "g": "^2.0.1",
    "lodash.debounce": "^4.0.8",
    "mutationobserver-shim": "^0.3.7",
    "pdfkit": "^0.10.0",
    "react": "^16.13.1",
    "react-art": "^16.12.0",
    "react-dom": …