Question

我尝试的项目是使用Post方法API服务进行身份验证。当我尝试运行该项目时，我无法连接到开发服务器。

我试图关闭打包程序并运行react-native start命令，并打开另一个选项卡，并使用react-native run-ios运行项目，但是构建失败，表明端口已在使用中。

import { AppRegistry, StyleSheet, TextInput, View, Alert, Button, Text } from 'react-native';

class MainProject extends Component {

constructor(props) {

    super(props)

    this.state = {

      UserName: '',
      UserEmail: '',
      UserPassword: ''

    }

  }
  UserRegistrationFunction = () =>{
 const { UserName }  = this.state ;
 const { UserEmail }  = this.state ;
 const { UserPassword }  = this.state ;
fetch('https://reactnativecode.000webhostapp.com/user_registration.php', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: UserName,
    email: UserEmail,
    password: UserPassword
  })
}).then((response) => response.json())
      .then((responseJson) => {

// Showing response message coming from server after inserting records.
        Alert.alert(responseJson);

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


  }

  render() {
    return (

<View style={styles.MainContainer}>

        <Text style= {{ fontSize: 20, color: "#000", textAlign: 'center', marginBottom: 15 }}>User Registration Form</Text>

        <TextInput

          // Adding hint in Text Input using Place holder.
          placeholder="Enter User Name"

          onChangeText={UserName => this.setState({UserName})}

          // Making the Under line Transparent.
          underlineColorAndroid='transparent'

          style={styles.TextInputStyleClass}
        />

        <TextInput

          // Adding hint in Text Input using Place holder.
          placeholder="Enter User Email"

          onChangeText={UserEmail => this.setState({UserEmail})}

          // Making the Under line Transparent.
          underlineColorAndroid='transparent'

          style={styles.TextInputStyleClass}
        />

        <TextInput

          // Adding hint in Text Input using Place holder.
          placeholder="Enter User Password"

          onChangeText={UserPassword => this.setState({UserPassword})}

          // Making the Under line Transparent.
          underlineColorAndroid='transparent'

          style={styles.TextInputStyleClass}

          secureTextEntry={true}
        />

        <Button title="Click Here To Register" onPress={this.UserRegistrationFunction} color="#2196F3" />



</View>

    );
  }
}

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',
flex:1,
margin: 10
},

TextInputStyleClass: {

textAlign: 'center',
marginBottom: 7,
height: 40,
borderWidth: 1,
// Set border Hex Color Code Here.
 borderColor: '#2196F3',

 // Set border Radius.
 borderRadius: 5 ,

// Set border Radius.
 //borderRadius: 10 ,
}

});

export default MainProject;

预期结果：查看用于用户身份验证的登录屏幕实际结果：无法连接到开发服务器

Answer 1

首先触发命令killall node -9，然后触发命令react-native run-ios。

或

运行rm -rf ios/build/; kill $(lsof -t -i:8081); react-native run-ios

无法连接到开发服务器反应本机ios

1 个答案: