小编zul*_*ain的帖子

我正在使用后端 nodejs 在我的 React.js 应用程序中实现 razorpay 支付网关。

这里frontend.jsx

razorpayHandler = () =>{
        const payment_amount  = this.props.TotalPrice;
        const backend_url = 'https://25234399bb.ngrok.io';
        const self = this;
        const options = {
        key: config.RAZOR_PAY_KEY,
        amount: payment_amount * 100,
        name: 'StanPlus',
        description: 'pay your ambulance fare',
        handler(response) {
            const paymentId = response.razorpay_payment_id;
            const url =  backend_url+'/razorpay/'+paymentId+'/'+payment_amount+'/'+self.id;
            console.log(paymentId)
            // Using my server endpoints to capture the payment
            fetch(url, {
            method: 'get',
            headers: {
                "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
            }
            })
            .then(resp =>  resp.json())
            .then(function (data) {
                    console.log(data) …

我开发了 React 应用程序，之前我在 webpack v3 上构建了相同的应用程序，现在我升级到 v4。
在 v3 dev-server上它工作得很好，但在 v4 上它需要花费大量时间来构建，并且每次它都会再次构建整个项目（可能就是这个原因）
我的webpack.dev.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devtool: 'inline-source-map',  
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                loader: "babel-loader"
                }
            },
            {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            minimize:false,
                            importLoaders: 1,
                        } …

我正在将我的 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 { …

我有一个用 react-js 开发的应用程序。我想将此应用程序集成到react-native-webview 中。一切我都对，但我有两个问题。
1-如何在 react-native-webview 中访问用户的当前位置。
2-如何在 react-native-webview 中调试我的 react-js（网页）应用程序。

对于第一个问题，
如果我在移动浏览器中运行网页并单击该事件，我将获取用户的当前位置，同时当我的react-native 应用程序启动时，我正在调用当前位置的权限，因此在react-native-debugger我“m到处user.i的当前的位置，接着所述相似的例子，但此是与反应原生。
确切的问题是如何在 react-native-webview 中访问 webview 的当前位置

对于第二个问题，
当我单击事件以获取当前位置时，它没有显示当前位置，所以 ** 我想看看该事件的错误/响应是什么**。因为它在 webview 中，我可以访问 react-native-debugger 中的 react-native 日志，但无法在调试器中看到 web 视图日志。我也遵循了这个，但我不知道把那个 android 配置代码放在哪里。

我的本机代码

import React, {Component} from 'react';
import {PermissionsAndroid} from 'react-native';
import { WebView } from "react-native-webview";

export default class App extends Component {

constructor(props){
    super(props);

    // To see all the requests in the …

在我作出反应的应用程序我执行服务器端渲染，所以我不希望添加node_modules的，因为我的表现服务器端issue.But我想css从node_modules它们用作UI套件libs.so我在使用的WebPack nodeExternal的WebPack。 server.config文件如

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const nodeExternals = require('webpack-node-externals')
let test = {
    test: /\.css$/,
    loader: 'css/locals?module&localIdentName=[name]__[local]___[hash:base64:5]'
}   


const config = {
    target:'node',
    entry: './src/index.js',

    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'build')
    },
    externals: [nodeExternals({
        whitelist: [/\.(?!(?:jsx?|json)$).{1,5}$/i]
    })]
}

module.exports  = merge(baseConfig,config)

这里webpack添加 css 文件，但它没有从我的 node_modules UI 工具包文件中加载@font-face。如果我从webpack.server.config文件中删除nodeExternal，那么一切正常，但文件大小会增加。 我已经在我的webpack.base.config文件中添加了字体规则bundle.js

const path = …