React Native开发服务器返回错误码500求助

嘿，我仔细看了你的代码，开发服务器返回500错误大多是代码里的拼写/语法错误导致的，咱们一步步排查修复：

1. 样式引用与定义的大小写不匹配 #

你在组件里用了大写的Styles去引用样式，但实际定义的是小写的styles，而且属性名大小写也有问题：

• App.js里的 <View style={Styles.Container}> 要改成 <View style={styles.container}>
• RegForm里的 <View style={Styles.RegForm}> 要改成 <View style={styles.RegForm}>

2. StyleSheet方法拼写错误 #

React Native里创建样式的方法是小写的create，你两处都写成了大写的Create，这会直接报错：

// 错误写法
const styles=StyleSheet.Create({...})

// 正确写法
const styles=StyleSheet.create({...})

3. 组件导入路径错误 #

App.js里导入RegForm的路径少了一个点，导致找不到组件：

// 错误写法
import RegForm from '.app/Components/RegForm'

// 正确写法（根据你的文件结构调整，示例为RegForm在根目录Components文件夹下）
import RegForm from './Components/RegForm'

4. 样式属性拼写错误 #

还有几处属性拼写错误会影响渲染：

• alignSelf:'strech' 里的strech要改成stretch
• 按钮样式里的alignItem:'center'要改成复数的alignItems:'center'
• borderBottomWidth:'1' 不需要加引号，直接写数字1即可

修复后的完整代码示例 #

App.js #

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import RegForm from './Components/RegForm'

export default class App extends React.Component{
  render(){
    return( 
      <View style={styles.container}>
        <RegForm />
      </View>
    )
  }
}

const styles=StyleSheet.create({
  container:{
    flex:1 ,
    justifyContent:'center',
    backgroundColor:'#36485f' ,
    paddingLeft:60 ,
    paddingRight:60 ,
  },
})

RegForm.js #

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

export default class RegForm extends React.Component{
  render(){
    return( 
      <View style={styles.RegForm}>
        <Text style={styles.header}>Registration</Text>
        <TextInput style={styles.TextInput} placeholder="Please Enter your Name" />
        <TextInput style={styles.TextInput} placeholder="Please Enter your Email" />
        <TextInput style={styles.TextInput} placeholder="Please Enter your Password" secureTextEntry={true} />
        <TextInput style={styles.TextInput} placeholder="Please Enter your Mobile No" />
        <TextInput style={styles.TextInput} placeholder="Please Enter your CNIC" />
        <TouchableOpacity style={styles.button}>
          <Text style={styles.btntext}>Sign Up</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  RegForm:{
    alignSelf:'stretch' ,
  },
  header:{
    fontSize:24 ,
    color:'#fff',
    paddingBottom:10 ,
    marginBottom:40 ,
    borderBottomColor:'#199187',
    borderBottomWidth:1 ,
  },
  TextInput:{
    alignSelf:'stretch',
    height:40 ,
    marginBottom:30 ,
    color:'#fff' ,
    borderBottomColor:'#f8f8f8',
    borderBottomWidth:1 ,
  },
  button:{
    alignSelf:'stretch',
    alignItems:'center',
    padding:20 ,
    backgroundColor:'#59cbbd',
    marginTop:30 ,
  },
  btntext:{
    color:'#fff',
    fontWeight:'bold',
  }
})

最后操作步骤 #

1. 保存所有修复后的文件
2. 在终端重启开发服务器并清除缓存：npm start --reset-cache
3. 重新在你的三星S7 Edge真机上运行项目，应该就能解决500错误了

内容的提问来源于stack exchange，提问作者Rishail Siddiqui