Question

我是React Native和Node.js的新手，所以这个问题可能很明显。我有从“ App.js”运行的React Native应用。

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default class App extends React.Component 
{
  render() 
  {
    return (
      <View style={styles.container}>
        <Button onPress={this.handlePress} title="Press me" />
      </View>
    );
  }

  handlePress() 
  {
    fetch('http://10.222.22.22:3000/',{
      method: 'POST',
      body: JSON.stringify({
        a: 'hello'
      }),
      headers: {"Content-Type": "application/json"}
    })
    .then(function(response){
    return response.json()
    }).catch(error => console.log(error));
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

（出于安全原因，我的IP实际上不是10.222.22.22）。

我也有一个从“ server.js”运行的Node.js服务器。

var express = require('express');
var app = express();
const bodyParser = require("body-parser");

app.use(bodyParser.urlencoded({
    extended: true
}));

app.use(bodyParser.json());

// Here is where I'm trying to access and log the value of "a"
app.post('/', function (req, res) {
	console.log(req.body.a);
});

app.listen(3000, function() {
  console.log('Listening on port 3000');
});

我正在尝试将“ a”的值（从App.js handlePress（）中的获取主体）访问到“发送”到服务器后。到目前为止，除了“侦听端口3000”以外，控制台上什么都没有显示。任何帮助将不胜感激，谢谢！

Answer 1

ngrok 允许您将在本地机器上运行的 Web 服务器公开到 Internet。参考 - Documentation

设置非常简单。

通过 npm i ngrok -g
从 npm 全局下载 ngrok
打开终端并运行 ngrok http 3000（因为您的服务器在端口 3000 上运行）
你会得到一个类似于 https://3e8a70f45d9b.ngrok.io 的 URL（链接对你来说是唯一的）
在另一个终端上运行您的服务器并在另一个终端上运行您的本机应用程序
现在将您的网址从 http://10.222.22.22:3000/ 更改为您在第 3 步中获得的链接。

<块引用>

注意：登录 ngrok.com 可以让您有更多时间进行会话，这与默认超时会话 2 小时不同

Answer 2

尝试将handlePress声明为箭头函数。

 handlePress = () => {
    // ... your fetch code
 }

React Native通过抓取将数据发送到Node.js服务器

2 个答案: