如何在React Native项目中使用旧版Navigator及Legacy组件？

Hey there! I’ve been in your exact situation—trying to revive deprecated React Native components for older project versions—so let me walk you through how to get this set up smoothly.

Step 1: Install the Legacy Components Package #

First, install the npm package tailored for older React Native versions. Since your project is on RN 0.43, the base version of this package should play nice, but if you hit compatibility snags, stick to a release explicitly marked for legacy RN builds. Run this in your project root:

npm install react-native-legacy-components --save

(If you used yarn back in the 0.43 days, swap it for yarn add react-native-legacy-components.)

Step 2: Import the Navigator Component #

The core React Native library dropped Navigator after versions like 0.43, so you’ll import it directly from the legacy package instead. Add this line at the top of your component file:

import { Navigator } from 'react-native-legacy-components';

Step 3: Implement the Navigator in Your Code #

You can use this Navigator exactly like the original RN 0.43 version from the official docs. Here’s a working example to kick things off:

import React, { Component } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';
import { Navigator } from 'react-native-legacy-components';

// Sample home screen component
class HomeScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home Screen</Text>
        <TouchableHighlight 
          onPress={() => this.props.navigator.push({ id: 'Details' })}
          style={{ marginTop: 20, padding: 10, backgroundColor: '#ddd' }}
        >
          <Text>Go to Details</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

// Sample details screen component
class DetailsScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Details Screen</Text>
        <TouchableHighlight 
          onPress={() => this.props.navigator.pop()}
          style={{ marginTop: 20, padding: 10, backgroundColor: '#ddd' }}
        >
          <Text>Go Back</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

class App extends Component {
  renderScene(route, navigator) {
    switch (route.id) {
      case 'Home':
        return <HomeScreen navigator={navigator} />;
      case 'Details':
        return <DetailsScreen navigator={navigator} />;
      default:
        return <HomeScreen navigator={navigator} />;
    }
  }

  render() {
    return (
      <Navigator
        initialRoute={{ id: 'Home' }}
        renderScene={this.renderScene.bind(this)}
        configureScene={() => Navigator.SceneConfigs.FloatFromRight}
      />
    );
  }
}

export default App;

Key Things to Keep in Mind #

• Stick to Compatible Versions: If you run into errors, avoid upgrading the legacy package to the latest release—look for versions tagged as compatible with older React Native builds in the package’s repo notes.
• Legacy Limitations: This component is archived, so there won’t be any bug fixes or updates. If you can eventually migrate your project to a modern navigation library like React Navigation, that’s a better long-term move, but this will keep your 0.43 project running.
• Follow Original Docs: For advanced setup (like custom transitions or navigation bars), the original RN 0.43 Navigator docs still apply—this package is just a preserved copy of the original component.

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