Question

我在学校有一个使用React-native的小项目。我的工作是读取数据库（本地主机）中的数据并渲染到平面列表。像标题这样的问题，我已经在许多页面上看到了一些解决方案，但是它不起作用。那就是我的routes.js代码：

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');

const connection = mysql.createPool({
  host     : 'localhost',
  user     : 'root',
  password : '',
  database : 'mangareader'
});
const app = express();

// Creating a GET route that returns data from the 'users' table.
app.get('/manga', function (req, res) {
    // Connecting to the database.
    connection.getConnection(function (err, connection) {

    // Executing the MySQL query (select all data from the 'users' table).
    connection.query('SELECT * FROM manga', function (error, results, fields) {
      // If some error occurs, we throw an error.
      if (error) throw error;

      // Getting the 'response' from the database and sending it to our route. This is were the data is.
      res.send(results)
    });
  });
});

// Starting our server.
app.listen(3000, () => {
 console.log('Go to http://localhost:3000/manga so you can see the data.');
});

这就是我的渲染代码：

import React, {Component} from 'react';
import {
    FlatList,
    StyleSheet,
    View,
    Text,
    ActivityIndicator,
  } from 'react-native'; 


  export default class MangaList extends Component {

    constructor(props){
        super(props);
        this.state ={ isLoading: true}
      }

      componentDidMount(){
        return fetch('192.168.1.5:3000/manga')
          .then((response) => response.json())
          .then((responseJson) => {

            this.setState({
              isLoading: false,
              dataSource: responseJson.manga,
            }, function(){

            });

          })
          .catch((error) =>{
            console.error(error);
          });
      }



      render(){

        if(this.state.isLoading){
          return(
            <View style={{flex: 1, padding: 20}}>
              <ActivityIndicator/>
            </View>
          )
        }

        return(
          <View style={styles.container}>
            <FlatList
              data={this.state.dataSource}
              renderItem={({item}) => <Text>{item.manga_name}, {item.manga_des}</Text>}
              keyExtractor={({id}, index) => manga_id}
            />
          </View>
        );
      }
    }
  const styles = StyleSheet.create({
      container: {
          marginTop: 15,
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#F5FCFF'
      },
  });

但是当我用https://facebook.github.io/react-native/movies.json替换localhost时，它运行得很好。顺便说一句，我的英语水平不好，所以如果我语法错误，请原谅我

Answer 1

假设您的快递服务器运行正常：

如果您的服务器位于本地主机上，则将IP地址更改为http://10.0.2.2:3000/manga以访问您的服务器。

如果要连接到其他主机，或使用192.168.*.*，请在终端中输入adb reverse tcp:3000 tcp:3000（在PATH或同一目录中具有 adb ），然后使用http://192.168.*.*:3000/manga

也请检查：Android 8: Cleartext HTTP traffic not permitted，如moritzw的建议

TypeError：网络请求失败

1 个答案: