React Native执行react-native run-android时出现500错误，求永久解决方法

Let's work through this issue step by step—first, we'll fix the code mistakes that are likely triggering the server's 500 error, then implement system-level fixes to prevent this from happening again.

Step 1: Fix Critical Errors in Your Code #

Looking at your code, there are a few clear issues that would break the dev server's compilation:

1. Duplicate DrawerLayoutAndroid import: You imported it at the top of the file, then re-required it inside the SecondActivity component. This creates a conflict the server can't resolve.
2. Undefined styles.container: The FirstRoute and SecondRoute components reference styles.container, but your StyleSheet.create only defines MainContainer and TextStyle.
3. Unused components: FirstRoute and SecondRoute are defined but never used—this isn't a breaking error, but it's unnecessary clutter.

Here's the corrected version of your code:

import React, { Component } from 'react'; 
import { AppRegistry, StyleSheet, Text, View, Button, Dimensions, DrawerLayoutAndroid } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

class MainActivity extends Component { 
  static navigationOptions = { 
    title: 'MainActivity', 
  }; 

  FunctionToOpenSecondActivity = () => { 
    this.props.navigation.navigate('Second'); 
  } 

  render() { 
    return ( 
      <View style={styles.MainContainer}> 
        <View style={{ marginBottom: 20 }}> 
          <Text style={styles.TextStyle}>This is MainActivity</Text> 
        </View> 
        <Button onPress={this.FunctionToOpenSecondActivity} title='Click here To Open Second Activity' /> 
      </View> 
    ); 
  } 
} 

class SecondActivity extends Component { 
  static navigationOptions = { 
    title: 'SecondActivity', 
  }; 

  render() { 
    const navigationView = ( 
      <View style={{flex: 1, backgroundColor: '#fff'}}> 
        <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I am in the Drawer</Text> 
      </View> 
    ); 

    return ( 
      <View style={styles.MainContainer}> 
        <DrawerLayoutAndroid 
          drawerWidth={100} 
          drawerPosition={DrawerLayoutAndroid.positions.Left} 
          renderNavigationView={() => navigationView}
        > 
          <View style={{flex: 1, alignItems: 'center'}}> 
            <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text> 
            <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text> 
          </View> 
        </DrawerLayoutAndroid> 
      </View> 
    ); 
  } 
} 

export default Project = StackNavigator({ 
  First: { screen: MainActivity }, 
  Second: { screen: SecondActivity } 
}); 

const styles = StyleSheet.create({ 
  MainContainer: { 
    justifyContent: 'center', 
    flex: 1, 
    margin: 10 
  }, 
  TextStyle: { 
    fontSize: 23, 
    textAlign: 'center', 
    color: '#000', 
  }, 
  // Add missing container style if you plan to use it later
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
}); 

Step 2: Permanent System-Level Fixes #

Even after fixing the code, if you still run into the 500 error, these steps will resolve underlying environment or caching issues permanently:

• Full cache and dependency reset:

  1. Delete your node_modules folder and reinstall dependencies:

     rm -rf node_modules && npm install
     

     (Use yarn install instead if you're using Yarn)
  2. Clean the Android build cache:

     cd android && ./gradlew clean && cd ..
     

  3. Run React Native's official clean command to clear metro cache:

     npx react-native clean
     

• Ensure port 8081 isn't being used:

  1. Check if another process is using port 8081:
     • On Mac/Linux: lsof -i :8081
     • On Windows: netstat -ano | findstr :8081
  2. Kill the process using the port (replace PID with the process ID from the previous command):
     • Mac/Linux: kill -9 PID
     • Windows: taskkill /F /PID PID
  3. If you prefer, run your app on a different port permanently:

     react-native run-android --port 8082
     

     Don't forget to set up the adb reverse proxy for the new port:

     adb reverse tcp:8082 tcp:8082
     

• Verify your environment setup:

  1. Double-check that ANDROID_HOME and JAVA_HOME environment variables are correctly set (match the paths to your Android SDK and JDK installations).
  2. Ensure your Android emulator/physical device is on the same network as your development machine, or that adb reverse is configured correctly for your chosen port.

• Upgrade outdated dependencies:
  The version of react-navigation you're using (with StackNavigator) is deprecated. Consider upgrading to the latest stable @react-navigation/native and @react-navigation/stack packages—this will resolve compatibility issues with newer React Native versions that might be causing intermittent errors.

内容的提问来源于stack exchange，提问作者Narendra Singh